（基础知识随笔记录）小程序实现Tab切换内容swiper效果

最近学习小程序遇到了一个需求，就是要实现点击tab切换内容，或滑动屏幕切换内容，对于大牛们来说确实不值一提，不过我自己的话就有点艰难。

好在我是半夜写的，头脑逻辑比较清醒，于是很快就做出来了，之前也在网上趴了帖子，不过实现的过程都比较复杂，于是自己做了个自我感觉还行的，如果有更加精简的方法请砸过来，嘿嘿。

效果：



废话不多说，上代码

wxml:

<!--pages/myinfo/range/range.wxml-->
<!--NameSpace-range-->
<view class='range-container'>
<!--下面这一句是重点,这里是内容切换区域-->
<swiper circular='true' bindchange='swiperChange' current='{{activeTab}}'>
<block wx:for="{{cardViewContent}}">
<swiper-item>
<view class='ra-co-cardview'>
<view class='ra-ca-viewtitle'>
<text>{{item.titleText}}</text>
<text>{{item.titleTag}}</text>
</view>
<!--double line-->
<!--版本二的显示双行内容，不用理会
<view class='ra-co-imgview'>
<image src='../images/online2.png'></image>
<image src='{{qrcodeImg}}' bindlongtap='previewImg'></image>
</view>
-->
<!--singel line-->
<view class='ra-co-imgview'>
<image src='{{item.img}}' bindtap='previewImg'></image>
</view>
</view>
</swiper-item>
</block>
</swiper>

<view class='ra-ca-bottom_tab'>
<block wx:for="{{bottomTab}}">
<view bindtap='rcbBottomTab' data-index='{{index}}' id="{{activeTab == index ? 'selected' : ''}}">{{item}}</view>
</block>
</view>
</view>

wxml大概逻辑：内容的切换直接用swiper，这样方便处理，而且效果还比较好，至于Tab就自己随便写个view就行。

难点：

1.通过点击tab选项卡来实现内容swiper切换到指定内容

2.滑动屏幕时，不仅swiper会切换，tab选项卡也要会跟着切换，实现样式的改变

小程序不支持直接操作DOM，因此只能通过视图层绑定逻辑层的data，视图层的操作传到逻辑层后刷新data中相应值来实现间接操作DOM。

js：

// pages/myinfo/range/range.js
Page({
data:{
cardViewContent:[
{
titleText: '镀锌类产品',
titleTag: '丰泰集团',
img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e1.jpg'
},
{
titleText: '热轧类产品',
titleTag: '丰泰集团',
img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e2.jpg'
},
{
titleText: '冷轧类产品',
titleTag: '丰泰集团',
img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e3.jpg'
},
{
titleText: '冷轧硅钢类产品',
titleTag: '丰泰集团',
img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e4.jpg'
},
{
titleText: '涂彩类产品',
titleTag: '丰泰集团',
img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e5.jpg'
},
{
titleText: '线材类产品',
titleTag: '丰泰集团',
img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e6.jpg'
}
],
bottomTab:['镀锌','热轧','冷轧','硅钢','涂彩','线材'],
activeTab: 0
},
//预览图片，暂时没用
previewImg:function(e){
wx.previewImage({
current:this.data.qrcodeImg,
urls: this.data.qrcodeImg
})
},
//点击选项卡Tab操作
rcbBottomTab:function(e){
this.setData({
activeTab:e.target.dataset.index
})
//console.log(e)
//console.log(this.data.activeTab)
},
//滑动屏幕操作
 swiperChange:function(e){
var activeTabIndex = e.detail.current
this.setData({
activeTab: activeTabIndex
})
//console.log(this.data.activeTab)
//console.log(e)

}

})

这里为了方便，直接使用静态数据

实现关键点：
 小程序的swiper提供了一个叫current的参数，用来指定当前显示swiper页面的值，打印他的结果如下



主要关注current的值，source牵扯另一件事情，这里暂时不提。很明显，当前页是实际上的第二页，因此值为1（从0开始记）。

如果我们想办法改变了页面中的current的值，那么就可以实现点击tab切换的效果，

因此在data中定义一个中间值，用来传送要改变的页面current，

activeTab: 0

当我们滑动swiper时，会通过视图层的bindchange="swiperChange"这个function 改变activeTab值，页面中的tab又来读取到这个值，就会实现在滑动时改变tab样式的效果。
那么反过来，给每个tab绑定rcbBottomTab这个函数，通过点击tab改变activeTab的值，来实现swiper跳转到指定内容的效果。

至关重要的一点就是需要给swiper绑定activeTab的值：

<swiper circular='true' bindchange='swiperChange' current='{{activeTab}}'>
至于tab的样式切换，写个id的三元运算就行了，我这里是循环来着，所以直接偷懒用了index的值，如果只有一两个tab那自己写一下data-这个参数就行，总之判断activeTab的值等不等于当前对应tab的值，不等于就指定id就行。

<view bindtap='rcbBottomTab' data-index='{{index}}'
id="{{activeTab == index ? 'selected' : ''}}">{{item}}</view>