微信小程序实现顶部普通选项卡效果(非swiper)

背景：前段时间写了一个抢红包小程序，里面涉及到了顶部选项卡，把它抽了出来。

效果图：

下面直接上代码:

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
});
},

以上是实现过程基本代码，省去了中间内容的代码。顶部个数是循环出来的，可以根据自己的实际需求设置。

附：swiper顶部选项卡链接

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

您可能感兴趣的文章:

• 微信小程序实现导航栏选项卡效果
• 微信小程序实现选项卡功能
• 微信小程序之选项卡的实现方法
• 微信小程序实现顶部选项卡(swiper)
• 微信小程序 选项卡的简单实例
• 微信小程序实战之顶部导航栏（选项卡）（1）
• 微信小程序开发之选项卡(窗口底部TabBar)页面切换
• 微信小程序 tabs选项卡效果的实现
• 微信小程序 实现tabs选项卡效果实例代码
• 微信小程序自定义组件实现tabs选项卡功能