uniapp关于tabBar的配置

最新推荐文章于 2024-09-22 23:00:20 发布

faker_big_devil

最新推荐文章于 2024-09-22 23:00:20 发布

阅读量4.1k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/faker_big_devil/article/details/122905557

版权

关于底部栏的配置和一些方法的作用

1.取消自带的头部

        {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页", //设置页面标题文字
				"enablePullDownRefresh": true ,//开启下拉刷新
				"navigationStyle": "custom"//取消自定义头部
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的",
				"navigationStyle": "custom",//取消自定义头部
				"enablePullDownRefresh": false //取消下拉刷新
			}
		}

2.底部栏的大小颜色等设置

	"tabBar": {
		"color": "#7A7E83",//字体颜色
		"selectedColor": "#007AFF",//选中时字体颜色
		"borderStyle": "red",//底部的上边框线条
		"backgroundColor": "#F8F8F8",//底部背景色
		"fontSize":"12px",//字体大小
		"spacing":"5px",//字体到图标的距离
		"height":"50px",//底部高
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabBar/home1.png",//未选中时图片样式
				"selectedIconPath": "static/tabBar/home2.png",//选中时图片样式
				"text": "首页"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/tabBar/home1.png",
				"selectedIconPath": "static/tabBar/home2.png",
				"text": "我的"
			}
		]
	}