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

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 -- 导航菜单的文本

关键词: 微信小程序