- 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 }) } }
