微信小程序 开发之顶部导航栏
需求：顶部导航栏
wxml：
zuojiankuohaophpcn!--导航条--> zuojiankuohaophpcnview class="navbar"> zuojiankuohaophpcntext wx:for="pw_navbar" data-idx="pw_index" class="item pw_currentTab==index ? 'active' : ''" wx:key="unique" bindtap="navbarTap">pw_itemzuojiankuohaophpcn/text> zuojiankuohaophpcn/view> zuojiankuohaophpcn!--首页--> zuojiankuohaophpcnview hidden="pw_currentTab!==0"> tab_01 zuojiankuohaophpcn/view> zuojiankuohaophpcn!--搜索--> zuojiankuohaophpcnview hidden="pw_currentTab!==1"> tab_02 zuojiankuohaophpcn/view> zuojiankuohaophpcn!--我--> zuojiankuohaophpcnview hidden="pw_currentTab!==2"> tab_03 zuojiankuohaophpcn/view>
wxss：
视野自助系统小型企业版2.0 Build 20050310
下载
自定义设置的程度更高可以满足大部分中小型企业的建站需求，同时修正了上一版中发现的BUG，优化了核心的代码占用的服务器资源更少，执行速度比上一版更快 主要的特色功能如下： 1）特色的菜单设置功能，菜单设置分为顶部菜单和底部菜单，每一项都可以进行更名、选择是否隐 藏，排序等。 2）增加企业基本信息设置功能，输入的企业信息可以在网页底部的醒目位置看到。 3）增加了在线编辑功能，输入产品信息，企业介绍等栏
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
})
}
}) 
