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


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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
jquery创建div 实现代码
Apr 27 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
javascript实现Table排序的方法
May 15 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 Javascript
基于Vue中的父子传值问题解决
Jul 27 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
php循环输出数据库内容的代码
2008/05/24 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
JavaScript实现全选取消效果
2017/12/14 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Django 多环境配置详解
2019/05/14 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python如何修改文件时间属性
2021/02/05 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
C#面试题
2016/05/06 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书