uniapp关于tabBar的配置

最新推荐文章于 2025-10-08 00:10:38 发布

原创最新推荐文章于 2025-10-08 00:10:38 发布 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文详细介绍了如何配置微信小程序的底部导航栏，包括颜色、大小、字体等设置，并展示了如何取消自定义头部，同时提供了相关代码示例，帮助开发者理解并实现页面风格统一。

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

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": "我的"
			}
		]
	}