電商底部導航欄的制作
我想大家對電商一定不陌生，一般電商的底部導航欄有以下幾個首頁、分類、購物車、個人中心。
app.json是用來配置page路徑以及導航欄屬性的，那我們要做首頁、分類、購物車、個人中心界面就要在page也添加這幾個界面，所以在app.json的page里添加如下代碼，寫入page路徑，系統會自動幫你創建界面的
"pages":[ "pages/home/home", "pages/classify/classify", "pages/cart/cart", "pages/mine/mine", "pages/index/index" ],好，既然添加了四個界面，那我們要怎么做底部導航欄吶，今天給app.json再添加一個屬性，就是可以在app.json里配置導航欄，將下面代碼添加到app.json里面
"tabBar": { "color": "#858585", "selectedColor": "#f0145a", "backgroundColor": "#ffffff", "borderStyle": "#000", "list": [ { "pagePath": "pages/home/home", "iconPath": "images/bottomNav/home.png", "selectedIconPath": "images/bottomNav/home_select.png", "text": "首頁" }, { "pagePath": "pages/classify/classify", "iconPath": "images/bottomNav/classify.png", "selectedIconPath": "images/bottomNav/classify_select.png", "text": "分類" }, { "pagePath": "pages/cart/cart", "iconPath": "images/bottomNav/cart.png", "selectedIconPath": "images/bottomNav/cart_select.png", "text": "購物車" }, { "pagePath": "pages/mine/mine", "iconPath": "images/bottomNav/mine.png", "selectedIconPath": "images/bottomNav/mine_select.png", "text": "我的" } ] }tabBar系統自帶字段，不可改，添加這個字段就是告訴系統你要添加導航欄，color、selectedColor、backgroundColor從字面意思也字段，分別對應的屬性是默認字體顏色、勾選字體顏色、背景顏色。着重說一下borderStyle，這個的定義底部導航欄與界面的邊界線，屬性有點特殊，特殊在如果你不想要這個分界線，可以把屬性設置為white，剩下的不管你寫入的是什么，系統都理解為要添加這條分界線，不信你可以試試。list屬性自然是設置對應導航欄的界面啦，
- pagePath：頁面路徑，就是你寫在page里的路徑
- iconPath：默認導航欄圖片路徑
- selectedIconPath：勾選圖片的路徑
- text：導航欄名字
這里要說的是，圖片路徑，一定要寫對，不然找不到圖片就顯示不出來，這里給大家提供我的導航欄圖片---提取碼：8zwe 大家可以根據我的圖片路徑創建對應的文件夾，如下圖
需要注意的：
- 添加tabBar的時候別忘記別忘記上面有一個逗號，這個是用來區分每個屬性的，所以你每添加一個屬性都要用逗號分隔開來，這點要注意，不然會報錯，這就是我把標點去掉的錯誤日志，一般報出錯誤日志Expecting 'EOF' XXXXXXXXX，got STRING都是語法錯誤，所以要仔細檢查看看哪里少寫了東西。
1-2.png - 還有就是在.json文件里是不可以寫注釋的，我原本想添加一點注釋方便讀者閱讀，然而會出現下面錯誤信息，解決辦法很簡單，把注釋刪除就可以啦
1-3.png舉一反三
- 我們創建了四個導航欄，那么如果我想再添加兩個導航欄可以嗎？
你也許覺得很簡單，試着去在list列表里添加兩個了吧，我也是這么做的，但是出問題啦。系統會報錯，這回知道了吧，最多只能是五個，沒辦法，誰讓微信是老大，人家定最多五個那就只能最多五個嘍！
1-3.png - 不知道你有沒有注意到，導航欄默認首頁勾選為紅色，那么我想要默認勾選分類為紅色吶，要怎么辦？
這個有點難度了吧，我剛開始想的是在tabBar屬性把list里的第一個home屬性和classify屬性換一下應該就可以解決，然而並不是這樣的，因為沒有效果，后來也是一次誤打誤撞給發現的，我給你點小提示，有沒有注意到，pages的第一個路徑是什么pages/home/home,沒錯，就是它，如果想要分類classify作為默認的勾選項，你只需要在pages屬性把home的路徑和classify路徑換一下，保存，重新編譯一下，你要的效果就出來了，這里可以總結的一點就是，tabBar是到page里的第一行路徑作為默認勾選項的。
- 我們創建了四個導航欄，那么如果我想再添加兩個導航欄可以嗎？
電商頂部導航欄制作
既然講了導航欄，干脆今天多講解一點，接着教教大家頂部導航欄怎么制作，先上效果圖
這個導航欄可不像底部導航欄啦，因為他的級別比較低，是頁面級別的導航欄，所以要寫在頁面里，你想要在哪個頁面加入頂部導航欄就在哪個頁面里添加如下代碼，這里以首頁的界面為例：
home.wxss
/* pages/home/home.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; font-size:14px; } /* 頂部導航字體顏色 */ .navbar .item.active{ color: #f0145a; } /* 頂部指示條屬性 */ .navbar .item.active:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 6rpx; background: #f0145a; }home.wxml
<!--導航條--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> </view>在home.wxml里面bindtap字段我們已經講解過啦，是事件監聽的標識符，事件名稱叫“navbarTap”可以到home.js里查找到這個事件wx:for這個字段重點講解，在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item，這是官方解釋，說白了就是item默認叫做變量的值，index表示第幾個變量的值，還不太明白請看這個 微信 wx:for 的講解
- wx:for="{{navbar}}" 意思是虛幻navbar的數組數據
- {{item}} 這里面是navbar數組里面的值，如護膚、彩妝等值
- wx:key="unique" 來指定列表中項目的唯一的標識符
- data-idx="{{index}}" 存儲一些數據供home.js里調用，這里data-xxx，xxx就是你給home.js里提供的數據關鍵詞，home.js通過獲取xxx關鍵詞來獲取xxx里面的數據
home.js
// pages/home/home.js var app = getApp() Page({ data: { navbar: ['護膚', '彩妝', '香水','個人護理'], currentTab: 0, }, // 導航切換監聽 navbarTap: function (e) { console.debug(e); this.setData({ currentTab: e.currentTarget.dataset.idx }) }, })home.js，這里讀過微信小程序入門篇（二）都知道，page頁面里.js一般是放data數據和事件監聽的，這里data有一個navbar導航欄數據，還有一個記錄當前位置的currentTab,字段可以自由命名，賦值的時候對應上就好，
- navbarTap 記得在home.wxml里面data-idx屬性嗎，在這里用到，currentTab: e.currentTarget.dataset.idx 把當前用戶選擇的Tab傳給currentTab里，為了驗證一下結果，我在這里面加入了一個輸出日志console.debug(e);，可以在控制台上看輸出的日志，我選擇點擊彩妝，輸出台的數據idx：1剛好是彩妝的位置。
總結
今天我們講解的微信小程序的底部導航欄和頂部導航欄，導航欄應該說是必須的對於電商小程序來說，那么今天的導航欄教程你掌握了嗎？
學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！