微信小程序利用swiper+scroll-view实现Tab切换
先放一张效果图
需要实现的功能逻辑：
1、当用户点击tab的时候，tab样式发生改变，并且下方对应的展示内容也发生改变。
2、当用户滑动下方内容时，会切换内容，并且上方的tab也会根据对应的展示内容改变选中状态
关键问题：如何将tab和下方的内容对应起来？
思路：
设置一个currentIndex变量，tab的选中状态以及展示的内容都根据这一个变量来进行切换。并且在用户触发点击tab事件和滑动内容事件的时候，都会更新这个currentIndex的值。
tab部分的wxml：
<view class="nav_wrap">
<scroll-view class="nav" scroll-x scroll-left="{{navScrollLeft}}">
<view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndex?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">
{{item.text}}
</view>
</scroll-view>
</view>
tab部分的js：
activeNav(e) {
this.setData({
currentIndex: e.currentTarget.dataset.index,
navScrollLeft: e.detail.current >= 5 ? ((e.detail.current) * 80) : 0
})
},
1、这里tab选中状态是根据currentIndex开进行判断的，如果currentIndex等于当前节点绑定的index,就给该节点加上选中时的class。
2、使用data-index="{{index}}"将index值绑定在该节点上，当用户点击tab时会触发activeNav事件。该事件会用e.currentTarget.dataset.index获取该节点绑定的index的值，并将这个值赋给currentIndex。
3、因为我这里的tab数量较多，所以还设置了一个navScrollLeft，用来自动改变scroll-view的离左侧的距离。这样当tab切换到第 6个以及6个之后的时候，可以从视觉角度上让该tab展示在第一个tab的位置。
swiper部分的wxml：
<swiper style="height:{{clientHeight?clientHeight+'px':auto}}" current="{{currentIndex}}" bindchange="changeTab">
<swiper-item>
<view class="slide">
<navigator>
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
<image src="{{item.imgSrc}}" mode='widthFix'></image>
</swiper-item>
</swiper>
</navigator>
</view>
<view class="vedioWrap">
<navigator url="../detail/detail?id={{item.id}}" class="vedioList" wx:for="{{vedioList}}" wx:key="index">
<image src="{{item.imgSrc}}" mode="widthFix"></image>
<view class="text">{{item.videoTitle}}</view>
</navigator>
</view>
</swiper-item>
<swiper-item wx:for="{{contentList}}" wx:key="{{index}}">
{{item.text}}
</swiper-item>
</swiper>
swiper部分的js：
changeTab(e){
this.setData({
currentIndex: e.detail.current,
navScrollLeft: e.detail.current>=5?((e.detail.current) * 80):0
})
},
1、swiper里展示的内容通过设置current="{{currentIndex}}"属性来根据currentIndex进行改变。
2、当用户滑动内容时，设置 bindchange="changeTab"来触发changeTab事件。该事件将当前内容的索引值赋给currentIndex。
3、这里的swiper的高度是通过计算获取的。因为这里展示的内容是通过后台接口获取并渲染出来的，所以不能给他一个固定值，又不能不给，因为swiper的默认高度只有150px,所以大家一定要根据自己的情况去将这个值计算出来在切换tab的时候重新赋值。
