微信小程序实现顶部普通选项卡效果(非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) 的全部内容, 来源链接: utcz.com/z/351094.html

回到顶部