微信小程序开发顶部导航栏示例(小程序顶部导航栏按钮)

本文主要介绍微信小程序开发顶部导航栏示例代码的相关信息。有需要的朋友可以参考一下。

微信小程序开发的顶部导航栏

要求:顶部导航栏

效果图:

wxml:

& lt！--导航栏-->:& lt；view class = & quot导航条& quot& gt& lttext wx:for = & quot；{ { navbar } } & quotdata -idx = & quot；{ { index } } & quotclass = & quotitem {{currentTab==index？'主动& # 039；: ''} } & quotwx:key = & quot；独特的& quotbindtap = & quotnavbarTap & quot& gt{ { item } } & lt/text & gt；& lt/view & gt；& lt！--Home -->:& lt；视图隐藏= & quot{{currentTab！= = 0 } } & quot& gttab _ 01 & lt/view & gt；& lt！--搜索-->:& lt；视图隐藏= & quot{{currentTab！= = 1 } } & quot& gttab _ 02 & lt/view & gt；& lt！--I -->:& lt；视图隐藏= & quot{{currentTab！= = 2 } } & quot& gttab _ 03 & lt/view & gt；wxss:

page { display:flex；flex -方向:列；身高:100%；} .navbar { flex:none；显示器:flex背景:# fff} .导航条。项{位置:相对；flex:自动；text-align:居中；line -高度:80rpx} .navbar . item . active { color:# ffcc 00；} .navbar .item.active:在{ content:& quot；"；显示:块；位置:绝对；底部:0；左:0；右:0；高度:4rpx背景:# FFCC00}js:

var app = getApp()Page({ data:{ navbar:

感谢您的阅读，希望能帮到您，也感谢您对本站的支持！