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


Posted in Javascript onJune 29, 2017

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

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

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

我们先来看个效果图

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

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

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

1. 图标准备

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

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

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

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

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

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

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

2. 更改配置文件

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

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首页" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "开心测试" 
  }] 
 },

解释一下 对应的属性信息

tabBar 指底部的 导航配置属性

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

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

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

list  导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
详解vuex的简单使用
Mar 12 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 #Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
详解vue父子组件间传值(props)
Jun 29 #Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 #Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 #Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 #Javascript
详解vue数据渲染出现闪烁问题
Jun 29 #Javascript
You might like
Banner程序
2006/10/09 PHP
PHP动态变静态原理
2006/11/25 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
联谊活动策划书
2014/01/26 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
迎新生欢迎词
2015/01/23 职场文书
员工自我评价范文
2015/03/11 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫