微信小程序tab切换，(scroll-view + swiper)可滑动切换，导航栏跟随滚动实现
1.wxml
tab.
<view class="det_hd"><scroll-view scroll-x="true" class="scrollX" scroll-left="{{scrollLeft}}" scroll-with-animation><block wx:for-items="{{tabs}}" wx:key="{{index}}"><view id="{{index}}" class="cell {{activeIndex == index ? 'on' : ''}}" bindtap="tabClick"><view class="w1">{{item}}</view></view></block></scroll-view></view><swiper class="swiper-box" style="height:calc(100vh - 80rpx);" bindchange="change" current="{{activeIndex}}"><swiper-item><scroll-view scroll-y="true" class="scrollY">111</scroll-view><swiper-item><scroll-view scroll-y="true" class="scrollY">222</scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" class="scrollY">333</scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" class="scrollY">444</scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" class="scrollY">555</scroll-view></swiper-item></swiper>
2.wxss
page{height: 100%;overflow: hidden;}.scrollX{white-space: nowrap;margin-left: 30rpx;border-bottom: 1px solid #f9f9f9;}.scrollX .cell{display: inline-block;width: 164rpx;margin-right: 45rpx;height: 80rpx;line-height: 80rpx;color: #828282;font-size: 28rpx;}.scrollX .cell.on{position: relative;color: #b78031;}.scrollX .cell.on::after{content: '';width: 60rpx;height: 5rpx;background:#b78031;transform: translateX(-50%);position: absolute;left: 50%;bottom: 10rpx;border-radius: 3rpx;}.det_hd{background:#fff;}.pimg{border-radius: 10rpx;height: 410rpx;width: 100%;}
2.js
Page({data: {tabs:['老北京糖葫芦','幸福传家特幸福传家特','北京同仁堂药业','店铺店铺名称店铺店铺名称','老北京糖葫芦'],activeIndex:0,scrollLeft:0,},tabClick: function (e) {var cur = e.currentTarget.id;this.setData({activeIndex: cur,scrollLeft:cur >= 2 ? ((cur) * 82) : 0//判断当前选中的个数是否是第3个});},change:function(e){this.setData({activeIndex: e.detail.current,scrollLeft:e.detail.current >= 2 ? ((e.detail.current) * 82) : 0})},})
