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