wxml:
<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>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">
<view style='height: 48px;width: 100%'></view>
<!-- 我是代付款 -->
<swiper-item>
<!-- 加scroll-view更好 -->
<view>1</view>
</swiper-item>
<!-- 我是代发货 -->
<swiper-item>
<view>2</view>
</swiper-item>
<!-- 我是待收货 -->
<swiper-item>
<view>3</view>
</swiper-item>
<swiper-item>
<view>4</view>
</swiper-item>
<swiper-item>
<view>5</view>
</swiper-item>
</swiper>
wxss:
page{
background-color: #f1f1f1;
}
.swiper-tab {
width: 100%;
text-align: center;
line-height: 80rpx;
background-color: white;
position: fixed;
top: 0;
z-index: 2;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 20%;
color: #777;
}
.on {
color: #1abc9c;
border-bottom: 5rpx solid #1abc9c;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}
js:
var app = getApp()
Page({
data: {
/**
* 页面配置
*/
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
},
onLoad: function () {
var that = this;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
/**
* 滑动切换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
})
}
}
})