小程序tab實現頁面切換
本文實例為大傢分享瞭小程序tab實現頁面切換的具體代碼,供大傢參考,具體內容如下
.wxml
<view class='title'> <view class='titleSel' bindtap='titleClick' data-idx='0'> <text>待接收(0)</text> <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" /> </view> <view class='titleSel' bindtap='titleClick' data-idx='1'> <text>處理中(1)</text> <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " /> </view> <view class='titleSel' bindtap='titleClick' data-idx='2'> <text>已完成(1)</text> <hr class="{{2 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " /> </view> </view> <!--內容佈局--> <view class="colors"> <view class="colors1" wx:if="{{currentIndex==0}}"> {{currentIndex}} </view> <view class="colors2" wx:if="{{currentIndex==1}}"> {{currentIndex}} </view> <view class="colors3" wx:if="{{currentIndex==2}}"> {{currentIndex}} </view> </view>
.wxss
page{ width: 100%; height: 100%; } .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; } .titleSel { width: 33%; color: #5f6fee; font-size: 32rpx; display: flex; flex-direction: column; align-items: center; } .titleUnsel { color: #858fab; font-size: #858fab; } .headerLineSel { background: #5f6fee; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .headerLineUnsel { background: #fff; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .colors{ width: 100%; height: 100%; } .colors1{ width: 100%; height: 100%; background-color: royalblue; } .colors2{ width: 100%; height: 100%; background-color: salmon; } .colors3{ width: 100%; height: 100%; background-color: seagreen; }
.js
data: { currentIndex: 0, }, //用戶點擊tab時調用 titleClick: function (e) { let currentPageIndex = this.setData({ //拿到當前索引並動態改變 currentIndex: e.currentTarget.dataset.idx }) console.log(e.currentTarget.dataset.idx) },
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。