微信小程序前端开发:底部导航配置属性Tabbar教程
Tabbar是固定在页面底部的导航栏的配置属性,下面是添加方法及参数说明。
注意:
- Tabbar导航栏至少需要添加2个菜单,最多五个,否则会报错。
- 一般代码结束符号是;分号,小程序代码的结束符号是,逗号。
编辑全局配置文件app.json
,在第一层花括号{}
里添加代码(参数在后面)
"tabBar":{ "color":"#333333", "selectedColor":"#128ff9", "borderStyle":"black", "list":[ { "pagePath":"pages/index/index", "iconPath":"images/home_01.png", "selectedIconPath":"images/home_02.png", "text":"首页" }, { "pagePath":"pages/logs/logs", "iconPath":"images/logs_01.png", "selectedIconPath":"images/logs_02.png", "text":"日志" } ] }
参数说明:
color
-- 导航默认文本颜色
selectedColor
-- 当前页面导航文本颜色
borderStyle
-- 导航边框样式色,不写样式导航框上边框会出现默认的浅灰色线条
list
-- 导航配置数组,要显示的菜单就在这个数组里添加
pagePath
-- 页面路径,从根目录写起
iconPath
-- 默认图标路径,从根目录写起
selectedIconPath
-- 当前菜单图标路径,从根目录写起
text
-- 导航菜单的文本