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 }) } })
