微信小程序之-----简单的navbar

wxml：

<view class="navbar">
  <view class="navbar-item" wx:for="{{navbar}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="swichNav">
    <text class="navbar-text {{currentNavbar==idx ? 'active' : ''}}">{{item}}</text>
  </view>
</view>

xxss：

.navbar {
    display: flex;
    border-bottom: 1px solid #eee;
}
.navbar-item {
    flex: 1.0;
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: -1px;
}
.navbar-text {
    display: block;
    width: 80px;
    padding: 10px;
    margin: auto;
}
.navbar-text.active {
    border-bottom: 2px solid #000;
    color: deepskyblue;
    font-weight: bold;
}
.hidden {
    display: none;
}

js：

var app = getApp()
Page({
  data: {
    navbar: ['车辆管理', '授权车辆'],
    currentNavbar: '0',
  },
  /**
   * 切换 navbar
   */
  swichNav(e) {
    this.setData({
      currentNavbar: e.currentTarget.dataset.idx
    })
  }
})