微信小程序实战篇-电商（一）

我想你们对电商必定不陌生，通常电商的底部导航栏有如下几个首页、分类、购物车、我的中心。因此咱们按照这个来作吧。

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