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

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

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

效果图：

下面直接上代码:

wxml:

class="item {{currentIndex==index?'active':''}}"

bindtap="navbarTablWZBq" http://wx:key="unique">{{item}}

class="item {{currentIndex==index?'active':''}}"

bindtap="navbarTablWZBq" http://wx:key="unique">{{item}}

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;

lWZBqbackground: #36DB2C;

}

js:

data: {

navbar: ["我发出的", "我收到的"],

currentIndex: 0,//tabbar索引

},

navbarTab: function (e) {

this.setData({

currentIndex: e.currentTarget.dataset.index

});

},

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

附：swiper顶部选项卡链接

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。