效果圖,既可以點擊切換,又可以滑動切換
.wxml
<!--pages/detail/detail.wxml--><view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提現中</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提現</view></view><swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <swiper-item ><view>全部</view></swiper-item> <swiper-item><view>提現中</view></swiper-item> <swiper-item><view>已提現</view></swiper-item></swiper>
.wxss
/* pages/detail/detail.wxss */.swiper-tab{ width: 100%; border-bottom: 2rpx solid #ccc; text-align: center; height: 88rpx; line-height: 88rpx; display: flex; flex-flow: row; justify-content: space-between;}.swiper-tab-item{ width: 30%; color:#434343;}.active{ color:#F65959; border-bottom: 4rpx solid #F65959;}swiper{ text-align: center;}
.js
// pages/detail/detail.jsvar app = getApp()Page({ data: { currentTab: 0 }, onLoad: function (options) { // 頁面初始化 options為頁面跳轉所帶來的參數 }, //滑動切換 swiperTab: 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 }) } }})
以上所述是小編給大家介紹的微信小程序的tab選項卡的實現效果詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!
新聞熱點
疑難解答