1.实现效果
文章来源：https://www.toymoban.com/news/detail-594406.html
2.实现原理
循环一个数组，切换数据的时候根据index索引来动态的设置选中项，设置fixed定位，固定在顶部。文章来源地址https://www.toymoban.com/news/detail-594406.html
3.实现代码
<view class="hd">
<block wx:for="{{navList}}" wx:key="navList">
<view class="hd_flex {{nav_type == index ? 'hd_flex_on' : ''}}" catchtap="changeType" data-index="{{index}}">{{item}}</view>
</block>
</view>
page {
background: #F8F8F8;
padding-bottom: 20rpx;
}
.hd {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 88rpx;
line-height: 88rpx;
display: flex;
background: #fff;
}
.hd_flex {
flex: 1;
text-align: center;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.hd_flex_on {
font-size: 30rpx;
color: #FA871E;
position: relative;
}
.hd_flex_on::after {
content: "";
position: absolute;
bottom: 0;
width: 40%;
height: 6rpx;
background: #FA871E;
border-radius: 3rpx;
left: 50%;
transform: translateX(-50%);
}
Page({
data: {
navList: ['正在进行', '即将开始', '已结束'],
nav_type: 0,
},
changeType: function (e) {
let {
index
} = e.currentTarget.dataset;
if (this.data.nav_type=== index || index === undefined) {
return false;
} else {
this.setData({
nav_type: index
})
}
},
4.更多小程序案例，请关注苏苏的码云，（开源不易，大家共勉）
到了这里，关于微信小程序实现tab切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
