微信小程序选项卡效果 微信小程序实现顶部普通选项卡效果(非swiper)
纸上得来终觉浅-绝知此事要躬行 人气:0想了解微信小程序实现顶部普通选项卡效果(非swiper)的相关内容吗，纸上得来终觉浅-绝知此事要躬行在本文为您仔细讲解微信小程序选项卡效果的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：微信小程序,选项卡，下面大家一起来学习吧。
背景：前段时间写了一个抢红包小程序，里面涉及到了顶部选项卡，把它抽了出来。
效果图：
下面直接上代码:
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
});
},
以上是实现过程基本代码，省去了中间内容的代码。顶部个数是循环出来的，可以根据自己的实际需求设置。
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
加载全部内容