mpvue 转uniapp 导航栏样式错乱问题修复 tabbar 样式修复

最新推荐文章于 2024-07-04 16:07:25 发布

a_靖

最新推荐文章于 2024-07-04 16:07:25 发布

阅读量1.5k

点赞数

分类专栏： uni-app Web前端文章标签： tabbar uni-tabbar uniapp导航

本文链接：https://blog.csdn.net/qq_35713752/article/details/109180306

版权

Web前端同时被 2 个专栏收录

404 篇文章 25 订阅

订阅专栏

uni-app

86 篇文章 14 订阅

订阅专栏

效果图：修改前，修改后

找了半天没找到原因，只能自己改样式了，下面是样式代码（在app.vue 里面加上就行）


<style>
	/*每个页面公共css */
	uni-tabbar {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 998;
	}

	.uni-tabbar {
		display: flex;
		flex-direction: row;
		text-align: center;
	}
	.uni-tabbar__icon img{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
	}
	.uni-tabbar-border {
		flex: 1;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
	}

	.uni-actionsheet__cell{
		display: none;
	}
	.uni-tabbar__item {
		display: flex;
		flex: 1;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
	}
</style>

后来发现顶部导航也被影响了，然后重新创建项目复制文件就好了，所以我猜测是mpvue 的框架样式影响的，跟uniapp冲突了。