电商底部导航栏的制作

我想各人对电商一定不生疏，，，，，，一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。。以是我们凭证这个来做吧，，，，，，说究竟部导航，，，，，，不知道你还记得在 微信小程序入门篇（一）中app.json的作用，，，，，，若是不记得，，，，，，请翻看一下，，，，，，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都是语法过失，，，，，，以是要仔细检审查看那里少写了工具。。
  
• 尚有就是在.json文件里是不可以写注释的，，，，，，我原本想添加一点注释利便读者阅读，，，，，，然而会泛起下面过失信息，，，，，，解决步伐很简朴，，，，，，把注释删除就可以啦
  

举一反三

1. 我们建设了四个导航栏，，，，，，那么若是我想再添加两个导航栏可以吗？？？
   你也许以为很简朴，，，，，，试着去在list列内外添加两个了吧，，，，，，我也是这么做的，，，，，，可是出问题啦。。系统会报错，，，，，，这回知道了吧，，，，，，最多只能是五个，，，，，，没步伐，，，，，，谁让微信是老大，，，，，，人家定最多五个那就只能最多五个喽！
   
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恰恰是彩妆的位置。。

 

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，，若有知识产权人并不肯意我们使用，，，，，，若是有侵权请连忙联系。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，，仅系客观性形貌，，，，，，如您需要相识该类商品/服务详细的资讯，，，，，，请您直接与该类商品/服务的提供者联系。。