微信小程序之底部导航栏目开发（附代码）1

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

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

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

我们先来看个效果图

微信小程序之底部导航栏目开发（附代码）

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

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

1. 图标准备

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

微信小程序之底部导航栏目开发（附代码）

在弹出框中选择了俩个不同颜色的图标选择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": "开心测试" 
  }] 
 },

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

以上就是微信小程序之底部导航栏目开发（附代码）的详细内容，更多请关注php中文网其它相关文章！