微信小程序頂部導航欄十分常見、尤其是在新聞類的小程序裏，常見的導航欄有可水平滑動導航欄、居中導航欄、平分導航欄，本文手把手教你完成水平導航欄。
以《報修小程序源碼》爲基礎拓展講解平分導航欄
傳送門：flask + mysql + 微信報修小程序源碼獲取
最終實現結果如下：
編寫 wxml 頁面
編程思路：
需要一個外層 view ，將內層水平的子 view 包含進來 ，保證內層 view 的靈活行，是用遍歷 tabs 數組的形式進行 。
代碼編寫：
在 wxml 頁面最頂部寫入下面代碼：
<view class="flex nav">
<view class="nav-item {{index==current?'text-selected current':''}}" wx:for="{{tabs}}" wx:key bindtap="tabSelect" data-id="{{index}}">
{{item}}
</view>
</view>
編寫 wxss 樣式
編程思路：
水平平分導航欄包含：一個外層 view 和多個內層 view ，內層 view 是水平排列，外層 view 需使用 css 的 flex 屬性 ，同時內層各個 view 平分 ，因此內層 view 需要設置 flex=1 。
對於 css 不熟悉的同學，建議去看一下 css flex的使用方法。
在 wxss 文件中寫入以下代碼：
/* 頁面背景顏色爲 #f2f2f2 */
page {
background: #f2f2f2;
}
/* 設置導航外層樣式，絕對定位設置爲fixed。z-index: 999999; 能夠將 nav 佈局層級結果放在最上層，避免被下層view遮擋*/
.nav {
position: fixed;
background: white;
color: #353535;
z-index: 999999;
max-height: 94rpx;
width: 100%;
}
/* 設置爲水平佈局，文字居中顯示 */
.flex {
display: flex;
text-align: center;
}
/* 設置選中項的底部邊框 */
.nav .nav-item.current {
border-bottom: 4rpx solid;
}
/* 設置選中項的文字顏色和大小 */
.text-selected {
color: #2196F3;
font-size: 34rpx;
}
/* 設置各項的高度、邊距，同時設置flex=1，表示各項平分 */
.nav .nav-item {
height: 90rpx;
display: inline-block;
line-height: 90rpx;
margin: 0 10rpx;
padding: 0 20rpx;
flex: 1;
}
編寫 js
編程思路：
在 data 中定義一個數組 tabs ，用於存放我們要展示的導航項，這裏只放置了三項，建議不超過五項，超過五項不建議使用平分導航欄，需要使用可滑動導航欄。若頁面進入我們希望顯示第一個 tab ，則設置 current = 0 ，若希望像是第二個 tab ，則設置 current = 1。
每個 tab 點擊後，使用 tabSelect 函數進行切換改變 current 的數值即可。
在 js 文件中寫入下面代碼：
data: {
url: app.domain,
tabs: ['新報修', '維修中', '已完成'],
current:0,
},
tabSelect:function(e){
var current = e.currentTarget.dataset.id
this.setData({
current:current
})
},
到此！我們就完成一個水平平分導航欄。
總結：
小程序頁面的編寫，實際上和html+css+js的編寫相似，樣式的編寫主要是css 實現。假設你想完成一個特殊的頁面樣式，你可以在度娘上搜索使用 html+css實現的類似頁面樣式，修改 html 標籤爲小程序標籤即可使用。
現在，你應該把《報修小程序》源碼做進一步修改，將報修記錄和添加報修拆分，首頁顯示報修記錄，報修頁直接換成報修添加頁面。繼續擴展出報修工單的狀態吧！
如果你遇見任何問題，可掃碼關注我，與我交流！
