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

333 阅读1分钟

效果图:修改前,修改后

找了半天没找到原因,只能自己改样式了,下面是样式代码(在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冲突了。