電商底部導航欄的製作

我想大家對電商一定不陌生，一般電商的底部導航欄有以下幾個首頁、分類、購物車、個人中心。

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

  舉一反三

  1. 我們建立了四個導航欄，那麼如果我想再新增兩個導航欄可以嗎？
     你也許覺得很簡單，試著去在list列表裡新增兩個了吧，我也是這麼做的，但是出問題啦。系統會報錯，這回知道了吧，最多隻能是五個，沒辦法，誰讓微信是老大，人家定最多五個那就只能最多五個嘍！
     
     1-3.png
  2. 不知道你有沒有注意到，導航欄預設首頁勾選為紅色，那麼我想要預設勾選分類為紅色吶，要怎麼辦？
     這個有點難度了吧，我剛開始想的是在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剛好是彩妝的位置。

總結

今天我們講解的微信小程式的底部導航欄和頂部導航欄，導航欄應該說是必須的對於電商小程式來說，那麼今天的導航欄教程你掌握了嗎？