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

app.json是用來配置page路徑以及導航欄屬性的，那我們要做首頁、分類、購物車、個人中心介面就要在page也新增這幾個介面，所以在app.json的page裡新增如下程式碼，寫入page路徑，系統會自動幫你建立介面的。

好，既然添加了四個介面，那我們要怎麼做底部導航欄吶，今天給app.json再新增一個屬性，就是可以在app.json裡配置導航欄，將下面程式碼新增到app.json裡面

  "tabBar": {
      "color":"#858585",
      
 
"selectedColor": "#f0145a",
      "backgroundColor": "#ffffff",
      "borderStyle": "#000",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首頁",
      "iconPath": "resources/images/home.png",
      "selectedIconPath": "resources/images/home_select.png"
    },{
      "pagePath": "pages/classify/classify",
      
 
"text": "分類",
      "iconPath": "resources/images/classify.png",
      "selectedIconPath": "resources/images/classify_select.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "購物車",
      "iconPath": "resources/images/cart.png",
      "selectedIconPath": "resources/images/cart_select.png"
    },
    {
      
 
"pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "resources/images/mine.png",
      "selectedIconPath": "resources/images/mine_select.png"
    }]
  }

tabBar系統自帶欄位，不可改，新增這個欄位就是告訴系統你要新增導航欄，color、selectedColor、backgroundColor從字面意思也欄位，分別對應的屬性是預設字型顏色、勾選字型顏色、背景顏色。著重說一下borderStyle，這個的定義底部導航欄與介面的邊界線，屬性有點特殊，特殊在如果你不想要這個分界線，可以把屬性設定為white，剩下的不管你寫入的是什麼，系統都理解為要新增這條分界線，不信你可以試試。list屬性自然是設定對應導航欄的介面啦，

• pagePath：頁面路徑，就是你寫在page裡的路徑
• iconPath：預設導航欄圖片路徑
• selectedIconPath：勾選圖片的路徑
• text：導航欄名字

這裡要說的是，圖片路徑，一定要寫對，不然找不到圖片就顯示不出來，這裡給大家提供我的導航欄圖片---提取碼：8zwe

大家可以根據我的圖片路徑建立對應的資料夾，如下圖

電商頂部導航欄製作

這個導航欄可不像底部導航欄啦，因為他的級別比較低，是頁面級別的導航欄，所以要寫在頁面裡，你想要在哪個頁面加入頂部導航欄就在哪個頁面裡新增如下程式碼，這裡以首頁的介面為例：
home.wxss

/* pages/home/home.wxss */

page{
   display: flex;
   flex-direction: column;
   height:100%;
}
.navbar{
  flex:none;
  display:flex;
  flex-direction: row;
  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;
}

/*錄播圖*/
swiper{
  height: 300rpx;
}

swiper-item image{
  width: 100%;
  height: 100%
}

.navs{
  display: flex;
}

.nav-item{
   width : 25%;
   position: relative;
   display : flex;
   align-items: center;
   flex-direction: column;
   padding: 20rpx;
}

.nav-item .nav-image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.nav-item text{
  padding-top: 20rpx;
  font-size: 30rpx;
}

home.wxml

<!--pages/home/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裡面的資料

// 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裡。