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

站长资源 2024/11/27 佚名

73 1538 73

DDR爱好者之家 Design By 杰米

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

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

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

我们先来看个效果图

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

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

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

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

JavaScript之RegExp_动力节点Java学院整理

Vue.js列表渲染绑定jQuery插件的正确姿势

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

更新日志

友情链接