微信小程序實戰篇-電商（一）

我想你們對電商必定不陌生，通常電商的底部導航欄有如下幾個首頁、分類、購物車、我的中心。因此咱們按照這個來作吧。

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裏面的數據

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裏。