给小程序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();
},
});
