顶部导航栏（选项卡）

解释的地方

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: function(e){
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  }
})

成果展示