uni-app 底部tabbar设置 && 底部tabbar样式

最新推荐文章于 2024-08-21 21:20:29 发布

Dark_programmer

最新推荐文章于 2024-08-21 21:20:29 发布

阅读量1.6w

点赞数 4

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/Dark_programmer/article/details/121498785

版权

uni-app 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在微信小程序中创建并配置底部Tabbar，包括步骤1的页面创建，步骤2的pages.json配置，以及步骤3的全局样式修改。通过示例代码展示了如何设置字体颜色、选中颜色、边框样式、背景颜色等，并提供了修改Tabbar单项样式的方法，包括高度、图标大小、文字颜色等，帮助开发者自定义符合应用风格的Tabbar。

摘要由CSDN通过智能技术生成

自己不努力,没人会帮你

小程序很常见的底部tabbar按钮该如何设置呢？

1. 创建页面

目录如下：

pages
- index / index.vue
- mine / mine.vue

2. 配置tabbar

需要配置的文件：pages.json
配置代码块：

	"pages" : [ 
		// 这里是路由配置
	],
	"tabBar": { // 这里就是配置tabbar的地方
		"color": "#8a8a8a", // 导航栏字体颜色
		"selectedColor": "#d4237a", // 选中后字体的颜色
		"borderStyle": "black", // 底部的border颜色，只能是“black”或者“white”
		"backgroundColor": "#ffffff", // 底部背景颜色
		"list": [{
				"pagePath": "pages/index/index", // 页面路径
				"text": "首页", // 底部导航文字,
				"iconPath": "static/logo.png", // 没选中前的图标路径
				"selectedIconPath": "static/logo.png" // 选中后的图标路径
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			}
		]
	}

效果图：
在这里插入图片描述

3. tabbar样式修改

修改文件：App.vue全局样式添加

	.uni-tabbar {
		// tab 样式
		// 背景色
		background-color: rgba(57, 181, 74, 0.1) !important;

		// tabBar 样式
		// 上边框
		.uni-tabbar-border {
			background-color: #e54d42 !important; // tabBar 上边框的颜色
		}

		.uni-tabbar__item {

			// tabBar 单项样式
			height: 100rpx !important;

			&:not(:last-child) {
				border-right: 4rpx solid #eee;
			}

			.uni-tabbar__icon {
				// tabBar 图标样式
				width: 40rpx !important;
				height: 40rpx !important;
			}

			.uni-tabbar__label {
				// tabBar 文字样式
				// color:yellow !important
			}
		}
	}