这篇文章主要介绍了微信小程序中怎么实现顶部导航栏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联公司是一家专注于
网站设计制作、成都网站建设与策划设计,宁都网站建设哪家好?
成都创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:宁都等地区。宁都做网站价格咨询:18982081108
微信小程序 开发之顶部导航栏
需求：顶部导航栏
效果图：
wxml：
{{item}}
tab_01
tab_02
tab_03
wxss：
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
}
.navbar .item.active{
color: #FFCC00;
}
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #FFCC00;
}js：
var app = getApp()
Page({
data: {
navbar: ['首页', '搜索', '我'],
currentTab: 0
},
navbarTap: function(e){
this.setData({
currentTab: e.currentTarget.dataset.idx
})
}
})运行：
感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序中怎么实现顶部导航栏”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!
分享文章：微信小程序中怎么实现顶部导航栏-创新互联
分享地址：
http://cdkjz.cn/article/jjicc.html
