微信小程序-實現(xiàn)tab
發(fā)布時間：2021-07-08 08:54 所屬欄目：小程序開發(fā)教程
小程序開發(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，同樣是官方文檔
