先看效果图：

这个滑块除了可以点击上方的导航，还可以左右切换页面，随之导航也跟这切换。

实现步骤：

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

<view class="content"><view class="title"><view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">关注</view><view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">新鲜</view><view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">推荐</view></view><swiper class="swiper" bindchange="swiperchange" current="{{currentTab}}" style="height:{{winHeight}}px"><swiper-item item-id="{{item.id}}">关注</swiper-item><swiper-item item-id="{{item.id}}">新鲜</swiper-item><swiper-item item-id="{{item.id}}">推荐</swiper-item></swiper>
</view>

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;
}

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})},

很简单的两个步骤就实现了上面的功能。如有问题可在下方评论留言~