小程序開發(fā)中,有很多封裝好的控件供開發(fā)者使用,但是,很常見的tab選項卡居然沒有,只能自己搞一個。
實現(xiàn)原理也很簡單,無非是用給view(tab)設(shè)置一個點擊事件bintap,并且給view(tab)一個data-idx索引,根據(jù)當(dāng)前index來改變tab的狀態(tài)并決定swiper顯示那個內(nèi)容,改變swiper的內(nèi)容只需要改變swiper的current就好。
二、效果
三、實現(xiàn)
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> <!--內(nèi)容布局--> <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({ /** * 頁面的初始數(shù)據(jù) */ 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切換時會調(diào)用 pagechange: function (e) { if ("touch" === e.detail.source) { let currentPageIndex = this.data.currentIndex currentPageIndex = (currentPageIndex + 1) % 3 this.setData({ currentIndex: currentPageIndex }) } }, //用戶點擊tab時調(diào)用 titleClick: function (e) { let currentPageIndex = this.setData({ //拿到當(dāng)前索引并動態(tài)改變 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 } |
四、參考官方文檔
那么當(dāng)內(nèi)容改變時,我們也要改變tab選項卡的狀態(tài),這時候我們給swiper來一個bindchange,同樣是官方文檔
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)