微信小程序如何实现顶部普通选项卡非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>

.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;   }

data: {    navbar: ["我发出的", "我收到的"],    currentIndex: 0,//tabbar索引    },    navbarTab: function (e) {    this.setData({     currentIndex: e.currentTarget.dataset.index    });    },

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

以上就是微信小程序如何实现顶部普通选项卡非swiper效果的实例的详细内容，更多内容请关注技术你好其它相关文章！