tab导航栏可以横向滑动，竖屏滑动到当前模块时对应的tab变色 图标更改 同时当前tab会跟随处于tab栏中间；点击tab时当前tab变色，锚点跳转到对应页面。
参考了别人大神的代码，tab带图标并能选中改变的没找到，自己做了修改。
参考的链接：https://www.cnblogs.com/xsffliu/p/11097846.html 感谢~
wxml部分：
1.导航
<scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true"> <view class='tab-item {{nowstatus == "productBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{{0}}" data-hash="productBox"> <image data-current="{{0}}" data-hash="productBox" wx:if="{{currentTab == 0}}" src="../../image/lx-icon/zdrypf-xz.png" class="img"></image> <image data-current="{{0}}" data-hash="productBox" wx:else src="../../image/lx-icon/zdrypf-wxz.png" alt="" class="img"></image> 导航1 </view> <view class='tab-item {{nowstatus == "commentBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{{1}}" data-hash="commentBox"> <image data-current="{{1}}" data-hash="commentBox" wx:if="{{currentTab == 1}}" src="../../image/lx-icon/cpws-xz.png" class="img"></image> <image data-current="{{1}}" data-hash="commentBox" wx:else src="../../image/lx-icon/cpws-wxz.png" alt="" class="img"></image> 导航2 </view> <view class='tab-item {{nowstatus == "infoBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{{2}}" data-hash="infoBox"> <image data-current="{{2}}" data-hash="infoBox" wx:if="{{currentTab == 2}}" src="../../image/lx-icon/zxgg-xz.png" class="img"></image> <image data-current="{{2}}" data-hash="infoBox" wx:else src="../../image/lx-icon/zxgg-wxz.png" alt="" class="img"></image> 导航3 </view> <view class='tab-item {{nowstatus == "infoBox2" ? "active" : ""}}' bindtap="toViewClick" data-current="{{3}}" data-hash="infoBox2"> <image data-current="{{3}}" data-hash="infoBox2" wx:if="{{currentTab == 3}}" src="../../image/lx-icon/wdhmd-xz.png" class="img"></image> <image data-current="{{3}}" data-hash="infoBox2" wx:else src="../../image/lx-icon/wdhmd-wxz.png" alt="" class="img"></image> 导航4 </view> <view class='tab-item {{nowstatus == "infoBox2" ? "active" : ""}}' bindtap="toViewClick" data-current="{{4}}" data-hash="infoBox2"> <image data-current="{{4}}" data-hash="infoBox3" wx:if="{{currentTab == 4}}" src="../../image/lx-icon/xzcf-xz.png" class="img"></image> <image data-current="{{4}}" data-hash="infoBox3" wx:else src="../../image/lx-icon/xzcfbf-wxz.png" alt="" class="img"></image> 导航5 </view> </scroll-view>2.详情部分
<scroll-view class="box" style="height:{{winHeight}}" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll"> <view id="productBox">主体1</view> <view id="commentBox">主体2</view> <view id="infoBox">主体3</view> <view id="infoBox2">主体4</view> <view id="infoBox3">主体5</view> </scroll-view>
wxss部分：
page{ height:100%; } .box{height:100%; padding-top:60rpx; position: absolute;} .box view{ height:1500rpx; text-align: center; background-color: #ccc; } .nav-box { height: 231rpx; position: relative; } .tab { width: 100%; height: 231rpx; z-index: 100; white-space: nowrap; box-sizing: border-box; overflow: hidden; line-height: 100rpx; padding-top: 45rpx; padding-left: 35rpx; padding-right: 35rpx; box-sizing: border-box; } .tab-item { display: inline-block; width: 23%; font-size: 24rpx; text-align: center; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #7C7C7C; /* margin-right: 20rpx; */ line-height: 80rpx; } .active { color: #0763DA; }js部分：
//index.js //获取应用实例 Page({ data: { winHeight:'100%', toView:'', nowstatus:'', currentTab: '', productBoxTop: '', commentBoxTop: '', infoBoxTop: '', infoBox2Top:'', infoBox3Top: '', names:1, }, onLoad: function (options) { wx.getSystemInfo({ // 获取当前设备的宽高，文档有 success: (res) => { this.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth }) }, }) let that=this; wx.getSystemInfo({ success: function(res) { console.log(res) that.setData({ winHeight: res.windowHeight*2 - (res.windowWidth * 90 / 750) + 'rpx' }) }, }), wx.createSelectorQuery().select('#productBox').boundingClientRect(res => { //获取评论距离页面顶部高度 that.setData({ productBoxTop: res.top }) }).exec() wx.createSelectorQuery().select('#commentBox').boundingClientRect(res => { //获取评论距离页面顶部高度 that.setData({ commentBoxTop: res.top }) }).exec() wx.createSelectorQuery().select('#infoBox').boundingClientRect(res => { //获取详情部分距离页面顶部高度 that.setData({ infoBoxTop: res.top }) }).exec() wx.createSelectorQuery().select('#infoBox2').boundingClientRect(res => { //获取详情部分距离页面顶部高度 that.setData({ infoBox2Top: res.top }) }).exec() wx.createSelectorQuery().select('#infoBox3').boundingClientRect(res => { //获取详情部分距离页面顶部高度 that.setData({ infoBox3Top: res.top }) }).exec() }, toViewClick:function(e){ this.setData({ toView: e.target.dataset.hash, nowstatus: e.target.dataset.hash, currentTab:e.target.dataset.current }) var current = e.target.dataset.current; //获取当前tab的index // 导航tab共5个，获取一个的宽度 var tabWidth = this.data.windowWidth / 5; this.setData({ tabScroll: (current - 2) * tabWidth//使点击的tab始终在居中位置 }) }, onPageScroll: function (e) { var that = this; if (e.detail.scrollTop > that.data.productBoxTop - 360 && e.detail.scrollTop < that.data.commentBoxTop - 361) { var tabWidth = this.data.windowWidth / 5; this.setData({ nowstatus: 'productBox', currentTab: 0, tabScroll: (0 - 2) * tabWidth, }) } if (e.detail.scrollTop > that.data.commentBoxTop - 360 && e.detail.scrollTop < that.data.infoBoxTop - 361) { var tabWidth = this.data.windowWidth / 5; this.setData({ nowstatus: 'commentBox', currentTab: 1, tabScroll: (1 - 2) * tabWidth, }) } if (e.detail.scrollTop > that.data.infoBoxTop - 360 && e.detail.scrollTop < that.data.infoBox2Top - 361) { var tabWidth = this.data.windowWidth / 5; this.setData({ nowstatus: 'infoBox', currentTab: 2, tabScroll: (2 - 2) * tabWidth, }) } if (e.detail.scrollTop > that.data.infoBox2Top - 360 && e.detail.scrollTop < that.data.infoBox3Top - 361) { var tabWidth = this.data.windowWidth / 5; this.setData({ nowstatus: 'infoBox2', currentTab: 3, tabScroll: (3 - 2) * tabWidth, }) } if (e.detail.scrollTop > that.data.infoBox3Top - 360) { var tabWidth = this.data.windowWidth / 5; this.setData({ nowstatus: 'infoBox3', currentTab: 4, tabScroll: (4 - 2) * tabWidth, }) } }, })
