微信小程序如何设置底部导航栏目的方法介绍

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

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

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

我们先来看个效果图

"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 导航图标下方文字

以上就是微信小程序如何设置底部导航栏目的方法介绍的详细内容，更多请关注其它相关文章！