小程序利用swiper实现tab切换

小程序实现tab切换,还是挺简单的，原理就是利用index来控制滑动，先看效果图

wxml代码：

<view class="top">
<view bindtap='tabBar' data-i="{{index}}" wx:for="{{tab}}" class='{{state==index?"active":""}}'>{{item.text}}</view>

</view>
<scroll-view>
<swiper current="{{state}}" bindchange="touchTar">
<swiper-item  wx:for="{{tab}}" >{{item.text}}</swiper-item>
</swiper>

</scroll-view>

js代码：

Page({
    data: {
        state:0,
        // state的值0是激活状态，1是正常的值
        tab: [{ text: '全部订单' }, { text: '待评价' }, { text: '退款' }]
    },
    tabBar(e){
        var index = e.currentTarget.dataset.i;
        this.setData({
            state: index
        })
    },
    touchTar(e){
        var idx = e.detail.current;
        this.setData({
        state:idx
        })
    }
})

首先定义三个tabbar,然后渲染出来，state用来控制点击了那个tab,加上active样式，以及控制swiper的滑动

其中data-i用来记录点击的是那个tab

tabBar事件是区分点击了哪一个项目，例如点击了退款，那么当前的index=2,在设置data中的state=2,state会和当前的下标进行比较也就是以下这段代码

class='{{state==index?"active":""}}'

当state等于当前的下标的时候就加入active样式，这样就实现了点击时的样式。

下面就是如何控制项目滑动，原理和加入active的样式差不多,首先要先知道swiper的属性，例如current

当我们知道current是当前所在滑块的index时候，那么就好办了，因为data中state记录了你点击的是那个tabbar

<swiper current="{{state}}">

比如点击了待评价的时候，state变为1，那么swiper的current也变为1，就会滑动到swiper中的第一个项目(swiper项目从0开始计数)。

那么如何实现左右滑动项目的时候，上面的tab也跟着自动切换,需要了解swiper中bindchange事件

当滑动项目的时候，current也会跟着改变，那么就简单了

<swiper current="{{state}}" bindchange="touchTar">

给swiper绑定了bindchange事件,我们知道data中的state是控制tabbar的样式，那么当current改变的时候，也改变state的值就可以了

touchTar(e){
        var idx = e.detail.current;
        this.setData({
        state:idx
        })
    }