小程序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)
? },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于小程序tab实现页面切换的详细内容...