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

这篇文章主要介绍了微信小程序怎么实现顶部普通选项卡非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效果内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!