使用uniapp原生组件配置一个基础的底部tabbar

时间:2020-8-24 作者:admin


使用uniapp原生组件配置底部tabbar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

文章目录

开始配置

tabbar配置选项是和pages同级的

tabbar常用的配置项介绍:
属性 介绍
color tab 上的文字默认颜色
selectedColor tab 上的文字选中时的颜色
backgroundColor tab 的背景色
list tab 的列表,最少2个、最多5个 tab

以上为常用的配置选项,其他配置项可参考:uniapp官网

tabbar – list 配置项介绍:
属性 介绍
pagePath 页面路径,必须在 pages 中先定义
text tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPath 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

把上面这些配置项层次关系和作用搞清楚之后,就可以动手配置一个基本的tabbar了

参考代码:
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		……
    ],
	"globalStyle": {
		……
	},
	"tabBar":{
		"selectedColor":"white",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/Homehomepagemenu.png",
				"selectedIconPath":"static/HOME.png"
			},
			{
				"text":"新闻",
				"pagePath":"pages/news/news",
				"iconPath":"static/news.png",
				"selectedIconPath":"static/news_1.png"
			},
			{
				"text":"购物车",
				"pagePath":"pages/cart/cart",
				"iconPath":"static/cart.png",
				"selectedIconPath":"./static/cart_1.png"
			},
			{
				"text":"成员",
				"pagePath":"pages/member/member",
				"iconPath":"./static/LC_icon_user_fill_1.png",
				"selectedIconPath":"static/user.png"
			}
			
		],
		"backgroundColor":"#c41e00"
	}
}

效果如下:
使用uniapp原生组件配置一个基础的底部tabbar

//希望以上内容能够帮助到大家😄,不妨点个赞

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。