微信小程序前端开发：底部导航配置属性Tabbar教程

Web前端开发 / 4611 次阅读

Tabbar是固定在页面底部的导航栏的配置属性，下面是添加方法及参数说明。

wechat_tabbar.png

注意：

  1. Tabbar导航栏至少需要添加2个菜单，最多五个，否则会报错。
  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 -- 导航菜单的文本