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