微信小程序底部导航栏目开发资料

更新时间：2016年12月05日 11:14:09 投稿：lqh

这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料，微信小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家,需要的朋友可以参考下

微信小程序底部导航栏目开发

我们先来看个效果图

这里，我们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加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 导航图标下方文字

如果要改变更详细的样式请参看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

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

您可能感兴趣的文章:

JavaScript严格模式use strict的介绍
这篇文章主要介绍了JavaScript严格模式use strict，严格模式是JavaScript中的一种限制性更强的变种方式。严格模式并不是JavaScript中的子集，它在语义上与正常的代码有明显的差异，下面我们就一起来学习该内容吧,需要的朋友也可以参考一下
2021-12-12
微信小程序商城开发（ecshop ）简单实例
这篇文章主要介绍了微信小程序商城开发（ecshop ）简单实例的相关资料,需要的朋友可以参考下
2017-04-04
微信小程序网络API发起请求详解
这篇文章主要介绍了微信小程序网络API发起请求详解的相关资料,需要的朋友可以参考下
2016-11-11
JavaScript ES6语法中let,const ,var 的区别
这篇文章主要为大家介绍了JavaScript中let,const ,var 的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
TypeScript的类型指令单行注释详解
这篇文章主要为大家介绍了TypeScript的类型指令单行注释详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
autojs绘画实现六边形示例详解
这篇文章主要为大家介绍了autojs绘画实现六边形示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
JS按钮连击和接口调用频率限制防止客户爆仓
这篇文章主要为大家介绍了JS按钮连击和接口调用频率限制防止客户集体爆仓详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
微信小程序解决请求服务器手机预览请求不到数据的方法
这篇文章主要介绍了微信小程序解决请求服务器手机预览请求不到数据的方法的相关资料,配置https时，要使用443端口，就可以解决，需要的朋友可以参考下
2017-01-01
跨端开发框架avm组件封装经验分享
这篇文章主要为大家介绍了跨端开发框架avm组件封装的经验分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
带你彻底理解JavaScript中的原型对象
这篇文章主要介绍了带你彻底理解JavaScript中的原型对象,文中有详细的代码介绍,对正在学习js的小伙伴们有一定的帮助,需要的朋友可以参考下
2021-04-04