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


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中巧用cssText属性批量操作样式
Mar 13 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JS面向对象编程详解
Mar 06 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 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下MAIL的另一解决方案
2006/10/09 PHP
PHP多例模式介绍
2013/06/24 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
Vue加载json文件的方法简单示例
2019/01/28 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python中随机函数random用法实例
2015/04/30 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python之生成多层json结构的实现
2020/02/27 Python
python 爬虫请求模块requests详解
2020/12/04 Python
详解python的变量缓存机制
2021/01/24 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
创先争优标语
2014/06/27 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书