分享一个小程序开发实战

电商底部导航栏的制作

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

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 大家可以根据我的图片路径创建对应的文件夹，如下图

1-1.png

查看更多关于分享一个小程序开发实战的详细内容...