微信小程序实现顶部普通选项卡效果(非swiper)
程序员文章站
2022-04-29 08:27:06
背景：前段时间写了一个抢红包小程序，里面涉及到了顶部选项卡，把它抽了出来。
效果图：
下面直接上代码:
wxml:
背景：前段时间写了一个抢红包小程序，里面涉及到了顶部选项卡，把它抽了出来。
效果图：
下面直接上代码:
wxml:
<view class="navbar">
<text wx:for="{{navbar}}" data-index="{{index}}"
class="item {{currentindex==index?'active':''}}"
bindtap="navbartab" wx:key="unique">{{item}}</text>
</view>
<view hidden="{{currentindex!==0}}">
</view>
<view hidden="{{currentindex!==1}}">
</view>
wxss:
.navbar{
display: flex;
width: 100%;
flex-direction: row;
line-height: 80rpx;
position: fixed;
top: 0;
}
.navbar .item{
flex: auto;
font-size: 30rpx;
text-align: center;
background: #fff;
font-weight: bold;
}
.navbar .item.active{
color: #36db2c;
position: relative;
}
.navbar .item.active::after{
content: "";
display: block;
position: absolute;
height: 4rpx;
bottom: 0;
left: 0;
right: 0;
background: #36db2c;
}
js:
data: {
navbar: ["我发出的", "我收到的"],
currentindex: 0,//tabbar索引
},
navbartab: function (e) {
this.setdata({
currentindex: e.currenttarget.dataset.index
});
},
以上是实现过程基本代码，省去了中间内容的代码。顶部个数是循环出来的，可以根据自己的实际需求设置。
附：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。