小程序--导航栏篇

小程序—导航栏篇

看到一些公众号页面底部或顶部有导航栏是不是觉得非常牛逼，其实，不用佩服，你也可以滴，炒鸡简单，下面我就详细地讲解一下：

首先，看下效果图：

在这里，我添加了两个导航图标（小程序的导航栏图标最多为五个）
那么重点来了。。。。怎么实现导航栏的图标和文字的颜色变化呢？很简单，两步就能搞定了。

1. 图标准备
   常见图标可以在阿里图标库里下载（或者自己动手着色）
   进入图标库后，按需查找相应的图标，然后点击下载

   

   在弹出框中， 选择了两个不同颜色的图标（大小尺寸必须统一）即可，我选择的是png 然后下载，还要另起别名哦

   
   将下载的图标存放到小程序储存图片的文件夹
   

2. 更改配置文件
   找到项目根目录中的配置文件 app.json 加入如下导航栏的配置信息

   "tabBar":{
   "backgroundColor":"#F7F7F7",
   "color":"#777777",
   "selectedColor":"#ff4081",
   "borderStyle":"white",
   "list":[
     {
       "iconPath":"image/index_gray.png",
       "selectedIconPath":"image/index_pink.png",
       "pagePath":"pages/index/index",
       "text":"首页"
   },
   {
     "iconPath":"image/user_gray.png",
     "selectedIconPath":"image/user_pink.png",
     "pagePath":"pages/user/user",
     "text":"用户"
   }
   ]
   } 

   相关的属性说明：

   • tabBar 指底部的 导航配置属性
   • color 未选择时 底部导航文字的颜色
   • selectedColor 选择时 底部导航文字的颜色
   • borderStyle 底部导航边框的样色(注意: 这里如果没有写入样式 ,导航框上边框会出现默认的浅灰色线条)
   • list 导航配置数组
   • selectedIconPath 选中时 图标路径
   • iconPath 未选择时 图标路径
   • pagePath 页面访问地址
   • text 导航图标下方文字

   详细的属性说明可到W3Cschool官网进行查看。

   编译后保存就可以得到神奇的导航效果啦！！！！