小程序选项卡，可左右滑动
wxhtml:
<view class="swiper-tab">
<view class="tab-item swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="clickTab">我要取专票</view>
<view class="tab-item swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="clickTab">我的发布</view>
</view>
<swiper current="{{currentTab}}" class="swiper" duration="300" bindchange="bindChange" style="height:{{currentTab==1?Hei+'rpx':'100%'}}">
<swiper-item>我要取专票内容</swiper-item>
<swiper-item>我的发布内容</swiper-item>
</swiper>
wxss:
.swiper-tab {
width: 100%;
border-bottom: 2rpx solid #f5f5f5;
text-align: center;
height: 100rpx;
line-height: 100rpx;
font-size: 30rpx;
}
.swiper-tab-item {
display: inline-block;
width: 50%;
color: #999;
}
.tab-item {
flex: 1;
font-size: 30rpx;
display: inline-block;
color: #777;
}
.on {
color: #4ca835;
border-bottom: 4rpx solid #4ca835;
}
.swiper {
display: block;
height: 100%;
width: 100%;
}
js:
data: {
Hei:"",
currentTab: 0,
}
//滑动切换选项卡
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
// 点击切换选项卡
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
}
else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
注：
1.swiper这种选项卡高度不自适应，不适合做有列表展示的，比较麻烦；高度=每一条数据高度*数据条数
