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

我想大家对电商一定不陌生，一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。所以我们按照这个来做吧。

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 的讲解

扫描二维码关注公众号，回复： 4594455 查看本文章

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

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

电商顶部导航栏制作

猜你喜欢