介绍 & lt; view 类=皀avbar"祝辞,
,& lt; text wx:=皗{导航}}“,材料指数=皗{指数}}“,
,类=癷tem {{currentIndex==指数? & # 39;活跃# 39;:& # 39;& # 39;}}“,
,bindtap=皀avbarTab"天气:关键=皍nique"在{{项}}& lt;/text>,
& lt;/view>大敌;
,& lt; view 隐藏=皗{currentIndex !==0}}“祝辞,
& lt;/view>大敌;
,& lt; view 隐藏=皗{currentIndex !==1}}“祝辞,
,
,& lt;/view> .navbar {,
,显示:flex,,
,宽度:100%,,
,flex-direction:行,,
,行高:80 rpx;,
,位置:,固定;
,:,0;
},
.item {.navbar
flex:大敌;汽车;,
,字体大小:30 rpx;,
,text-align:,中心;
,背景:# fff;,
,粗细:大胆,,
},
.item.active {.navbar
,颜色:# 36 db2c;,
,位置:,相对;
},
.navbar .item.active::{后,
,内容:““,
,显示:块,,
,位置:绝对的,,
,高度:4 rpx;,
,底部:,0;
,左:,0;
,右:,0;
,背景:# 36 db2c;,
} 数据:,{,
导航条:大敌;[“我发出的,,,,我收到的“),,
,currentIndex: 0,//tabbar索引,
},大敌;
,navbarTab: function (e), {,
this.setData({大敌;
,,currentIndex: e.currentTarget.dataset.index
,});
},
这篇文章主要介绍了微信小程序怎么实现顶部普通选项卡非偷窃者效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来。
效果图:
下面直接上代码:
wxml:
wxs:
js:
感谢你能够认真阅读完这篇文章,希望小编分享微信小程序怎么实现顶部普通选项卡非偷窃者效果内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
