小程序tab實現頁面切換

更新時間：2022年07月06日 15:33:59 作者：小雅雅家的小凱凱吖

這篇文章主要為大家詳細介紹了小程序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({
? ? ? ? //拿到當前索引并動態(tài)改變
? ? ? ? currentIndex: e.currentTarget.dataset.idx
? ? ? })
?
? ? ? console.log(e.currentTarget.dataset.idx)
? },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: