宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

解释的地方 1.data-idx=”{{index}}”表示默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。 2.class=”item {{currentTab==index ? ‘active’ : ‘’}}“这个没大看懂，有知道的人请帮忙说明下，感谢~ 3.wx:key=“unique”——如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。（这个unique没看懂~有知道的请帮帮忙解释下，感谢！） 4.bindtap=“navbarTap”，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件”navbarTap”处理函数。 5. hidden=”{{currentTab!==0}}”表示显示和隐藏的意思，当事件currentTab不等于0时，包含hidden的组件内容被隐藏，等于0时，显示内容。

xml布局

<!–导航条–><view class=”navbar”> //循环导航的名字 <text wx:for=”{{navbar}}” data-idx=”{{index}}” class=”item {{currentTab==index ? ‘active’ : ”}}” wx:key=”unique” bindtap=”navbarTap”>{{item}}</text></view> <!–首页–><view hidden=”{{currentTab!==0}}”> tab_01</view> <!–搜索–><view hidden=”{{currentTab!==1}}”> tab_02</view> <!–我–><view hidden=”{{currentTab!==2}}”> tab_03</view>

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;}//导航里点击之后字的大小、导航底下的样式（可以设置宽高width；height；）和颜色.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: functione){ this.setData{ currentTab: e.currentTarget.dataset.idx }) }}) 成果展示