小程序選項卡，可左右滑動
阿新 • • 發佈：2017-12-19
size var 內容 右滑 tom return else tail tro
.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 }) } },
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-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 }) } },
小程序選項卡，可左右滑動