微信小程序實現tab選項卡
接下來直接查看源碼：
wxml
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<!--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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* 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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// 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 }) } }}) |
如果您的問題還未解決可以聯系站長付費協助。
有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群（50604020） PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群（50604130）
客服微信號：15898888535
聲明：本站所有文章資源內容，如無特殊說明或標注，均為采集網絡資源。如若內容侵犯了原著者的合法權益，可聯系站長刪除。
