小程序模板网

微信小程序设置底部导航栏目方法

2018-04-21 辽城鹤

小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家。

好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。

我们先来看个效果图

这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个。

那他们是怎么出现怎么着色的呢?两步就搞定!

 

1. 图标准备

阿里图标库  http://www.iconfont.cn/collections/show/29

我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮

在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 

将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了

 

2. 更改配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

 

  1. "tabBar": {  
  2.    "color": "#a9b7b7",  
  3.    "selectedColor": "#11cd6e",  
  4.    "borderStyle":"white",  
  5.    "list": [{  
  6.      "selectedIconPath": "images/111.png",  
  7.      "iconPath": "images/11.png",  
  8.      "pagePath": "pages/index/index",  
  9.      "text": "首页"  
  10.    }, {  
  11.      "selectedIconPath": "images/221.png",  
  12.      "iconPath": "images/22.png",  
  13.      "pagePath": "pages/logs/logs",  
  14.      "text": "日志"  
  15.    }, {  
  16.      "selectedIconPath": "images/331.png",  
  17.      "iconPath": "images/33.png",  
  18.      "pagePath": "pages/test/test",  
  19.      "text": "开心测试"  
  20.    }]  
  21.  },  


解释一下 对应的属性信息

 

 

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23834.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询