小编给大家分享一下微信开发实战之顶部导航栏的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站公司2013年成立，先为神池等服务建站，神池等地企业，进行企业商务咨询服务。为神池企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
需求：顶部导航栏
效果图：
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://jkwzsj.com/article/gideoi.html
