微信小程序顶部导航栏

wxml

<!--导航条-->
<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;
}
.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
    })
  }
})