先看效果图：
这个滑块除了可以点击上方的导航，还可以左右切换页面，随之导航也跟这切换。实现步骤：

编写滑块视图代码

编写逻辑代码
编写滑块视图代码编写逻辑代码wxml:




关注

新鲜

推荐







关注





新鲜





推荐









关注

新鲜

推荐







关注





新鲜





推荐




wxss:
.title{

display: flex;

flex-direction: row;

width: 100%;

background-color: #ff99cc;

height: 100rpx;

position: fixed;

z-index: 9999999999999;
}
.select{

width: 33%;

text-align: center;

height: 45px;

line-height: 45px;

color: white;

border-bottom: 5rpx solid #ff99cc;
}
.default{

margin:0 auto;

padding:15px;

color: #666;
}
.swiper{

margin-top: 100rpx;
}
.title{

display: flex;

flex-direction: row;

width: 100%;

background-color: #ff99cc;

height: 100rpx;

position: fixed;

z-index: 9999999999999;
}
.select{

width: 33%;

text-align: center;

height: 45px;

line-height: 45px;

color: white;

border-bottom: 5rpx solid #ff99cc;
}
.default{

margin:0 auto;

padding:15px;

color: #666;
}
.swiper{

margin-top: 100rpx;
}js:
data: {

currentTab:1,

winWidth:0,

winHeight:0
},

onLoad: function (options) {

wx.getSystemInfo({

complete: (res) => {

this.setData({

winWidth:res.windowWidth,

winHeight:res.windowHeight

})

},

})
},
switchNav(e){

console.log(e)

if(this.data.currentTab==e.target.dataset.current){

return false

}else{

this.setData({

currentTab:e.target.dataset.current

})

}
},
swiperchange(e){

this.setData({

currentTab:e.detail.current

})
},
data: {

currentTab:1,

winWidth:0,

winHeight:0
},

onLoad: function (options) {

wx.getSystemInfo({

complete: (res) => {

this.setData({

winWidth:res.windowWidth,

winHeight:res.windowHeight

})

},

})
},
switchNav(e){

console.log(e)

if(this.data.currentTab==e.target.dataset.current){

return false

}else{

this.setData({

currentTab:e.target.dataset.current

})

}
},
swiperchange(e){

this.setData({

currentTab:e.detail.current

})
},总结总结总结