- wxml代码
<block>
<view class='header'>
<navigator url="../index/index" hover-class="navigator-hover" open-type="switchTab">
<text class='iconfont .icon-jiantou-zuo icon-left'></text>
</navigator>
<text class='title'>我的订单</text>
</view>
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">未支付</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已支付</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">已取消</view>
<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">已完成</view>
<view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">待评价</view>
<view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">已评价</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<!-- list1 -->
<swiper-item>
111
</swiper-item>
<!-- list2 -->
<swiper-item>
222
</swiper-item>
<!-- list3 -->
<swiper-item>
333
</swiper-item>
<!-- list4 -->
<swiper-item>
444
</swiper-item>
<!-- list5 -->
<swiper-item>
555
</swiper-item>
<!-- list6 -->
<swiper-item>
666
</swiper-item>
</swiper>
</block>
- wxss代码
.swiper-tab{
width: 100%;
border-bottom: 1px solid #dadada;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list{
font-size: 30rpx;
display: inline-block;
width: 16%;
}
.on{
border-bottom: 5rpx solid #63b4ad;
}
.swiper-box{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-items{
height: 100%;
}
.scroll-views{
height: 100%;
}
- js代码
/**
* 页面的初始数据
*/
data: {
// tab切换
currentTab: 0
},
/**
* 滑动切换tab
*/
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}