给小程序swiper组件做个标题栏的滑动效果

实现效果如下：

效果图

wxml 代码如下：

<view class="swiper-tab">

        <block wx:for="{{tabs}}">

            <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>

        </block>

        <view class="swiper-slider" style="left: {{sliderLeft}}px; -webkit-transform: translateX({{sliderOffset}}px);transform: translateX({{sliderOffset}}px);"></view>

    </view>

    <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" circular="true">

    <swiper-item>

            <!-- 此处已省略-->

    </swiper-item>

</swiper>

wxss代码如下：

.swiper-tab {

    display: flex;

    display: -webkit-flex;

    position: absolute;

    top: 0rpx;

    left: 0rpx;

    width: 100%; 

    border-bottom: 1rpx solid #cacacb; 

    text-align: center; 

    background-color: #ffffff;

    line-height: 80rpx;

} 

.swiper-tab-list { 

    position: relative;

    width: 50%;

    height: 80rpx;

    line-height: 80rpx;

    flex: 1;

    -webkit-flex: 1;

    font-size: 34rpx;

    color: #333333; 

} 

.on { color: #f0b800;} 

.swiper-slider {

    position: absolute;

    left: 0;

    bottom: 0;

    content: ' ';

    width: 124rpx;

    height: 6rpx;

    background: #f0b800;

    transition: transform .25s;

    -webkit-transition: -webkit-transform .25s;

}

js代码如下：

var sliderWidth = 61; //滑块条宽度

var windowWidth;

Page({

    data: {

        tabs: ['淘克券','现金券'],

        currentTab: 0,

        showPop: 0,

    },

onLoad: function(options) {

        var that = this;

        that.setData({

            options: options

        })

        wx.setNavigationBarTitle({

            title: '我的优惠券'

        });

        wx.getSystemInfo({

            success: function(res) {

                let len = that.data.tabs.length;

                windowWidth = res.windowWidth;//获取手机屏幕宽度

                that.setData({

                    sliderLeft: (windowWidth / len - sliderWidth) / 2,

                    sliderOffset: windowWidth / len * that.data.currentTab

                });

            },

        })

    },

bindChange: function(e) {

        var that = this;

        console.log(e);

        let len = that.data.tabs.length;

        that.setData({

            currentTab: e.detail.current,

            card: false,

            sliderOffset: windowWidth / len * e.detail.current

        });

        that.getList();

    },

});