当前位置:龙哥网 > 网络技术 > 微信小程序前端开发:底部导航配置属性Tabbar教程(小程序底部tabbar自定义)

微信小程序前端开发:底部导航配置属性Tabbar教程(小程序底部tabbar自定义)

longge5个月前 (12-17)网络技术97

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

微信小程序前端开发:底部导航配置属性Tabbar教程(小程序底部tabbar自定义)

注意:

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

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!