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

效果图：

下面直接上代码:

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顶部选项卡链接

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

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