【微信小程序】微信小程序-實現tab

1、前言

小程序開發中，有不少封裝好的控件供開發者使用，可是，很常見的tab選項卡竟然沒有，只能本身搞一個。

實現原理也很簡單，無非是用給view(tab)設置一個點擊事件bintap，而且給view(tab)一個data-idx索引，根據當前index來改變tab的狀態並決定swiper顯示那個內容，改變swiper的內容只須要改變swiper的current就好。

 

2、效果

 

3、實現

wxml

<view class='ticket-container'> <scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <!--Tab佈局--> <view class='title'> <view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'> <text>未使用</text> <hr class="line-style"/> </view> <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'> <text>已使用</text> <hr class="line-style"/> </view> <view class="{{2 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='2'> <text>已過時</text> <hr class="line-style" /> </view> </view> <!--內容佈局--> <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'> <swiper-item class='swiper'> <view wx:for="{{firstList}}" wx:for-item="item" class='record-item'> <view class='name'> <span>名稱：{{item.name}}</span> <span>面額：{{item.money}}</span> </view> </view> </swiper-item> <swiper-item class='swiper' class='swiper'> <view wx:for="{{secondList}}" wx:for-item="item" class='record-item'> <view class='name'> <span>名稱：{{item.name}}</span> <span>面額：{{item.money}}</span> </view> </view> </swiper-item> <swiper-item class='swiper' class='swiper'> <view wx:for="{{thirdList}}" wx:for-item="item" class='record-item'> <view class='name'> <span>名稱：{{item.name}}</span> <span>面額：{{item.money}}</span> </view> </view> </swiper-item> </swiper> </scroll-view> </view>

js文件

// pages/mine/mine.js Page({ /** * 頁面的初始數據 */ data: { currentIndex: 0, "firstList": [{ name: 'w券1', money: '5.00' }, { name: 'w券2', money: '50.00'}], "secondList": [{ name: 'y券1', money: '10.00' }, { name: 'y券2', money: '20.00' }], "thirdList": [{ name: 'g券1', money: '30.00' }, { name: 'g券2', money: '40.00' }], }, //swiper切換時會調用 pagechange: function (e) { if ("touch" === e.detail.source) { let currentPageIndex = this.data.currentIndex currentPageIndex = (currentPageIndex + 1) % 3 this.setData({ currentIndex: currentPageIndex }) } }, //用戶點擊tab時調用 titleClick: function (e) { let currentPageIndex = this.setData({ //拿到當前索引並動態改變 currentIndex: e.currentTarget.dataset.idx }) } })

wxss文件

.container {
  height: 100%; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .title { width: 100%; height: 88rpx; background: white; display: flex; align-items: center; justify-content: space-around; } .title-sel { color: #24272c; font-size: 32rpx; display: flex; flex-direction: column; align-items: center; } .title-sel .line-style{ background: #fff; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .title-sel-selected{ color: #006bff; font-size: 32rpx; display: flex; flex-direction: column; align-items: center; } .title-sel-selected .line-style{ background: #006bff; height: 6rpx; width: 90rpx; position: relative; margin-top: 10rpx; } .swiper { width: 90%; flex: 1; overflow: scroll; margin: 0 auto; } .record-item { margin-top: 10rpx; background-color: white; padding-bottom: 5rpx; padding-top: 5rpx; font-size: 30rpx; } .name{ display: flex; justify-content: space-between; border: 1px solid #eee; padding: 2vh; border-radius: 10rpx }

 

4、參考官方文檔

那麼當內容改變時，咱們也要改變tab選項卡的狀態，這時候咱們給swiper來一個bindchange，一樣是官方文檔