本文实例为大家分享了小程序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)
},
