本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码，供大家参考，具体内容如下
我录制了个gif如下，黄色部分是不可以滑动的，蓝色部分可以滑动。
代码解说：
wxml代码：
页面一 页面二 页面三 1 2 3 左右可滑动1 左右可滑动2 左右可滑动3
js代码：
Page({
data: {
navState: 0,//导航状态
},
//监听滑块
bindchange(e) {
// console.log(e.detail.current)
let index = e.detail.current;
this.setData({
navState:index
})
},
//点击导航
navSwitch: function(e) {
// console.log(e.currentTarget.dataset.index)
let index = e.currentTarget.dataset.index;
this.setData({
navState:index
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
})
wxss代码：
.nav{
display: flex;
justify-content: space-around;
padding: 20rpx;
background-color: rgb(129, 241, 55);
font-size: 30rpx;
}
.nav-switch-style{
color: snow;
}
.style-default{
background-color: rgb(247, 229, 130);
padding: 100rpx 0;
text-align: center;
}
.style-roll{
background-color: rgb(130, 177, 247);
padding: 100rpx 0;
text-align: center;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802040832号 | 京ICP备19059560号-6 