问题:有时候,在模拟器上UI效果显示正常,但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性box-sizing:border-box;子组件加起来的宽度超过了父组件的宽度,从而导致显示的效果是:父组件还是正常显示在原来设定的位置上,而子组件则往下移动了,导致UI变乱。按照常理,当子组件的宽度大于父组件的宽度,会把父容器这个盒子给撑大,但是在微信小程序中,父容器还是原来设定的那么大,显示在原来位置,子组件则是往下移动,导致UI显示不正常。
解决方法:父组件要一起使用属性box-sizing:border-box;和overflow:hidden;注意子组件和父组件的宽度问题
.wxml代码如下:
<view class="head">
<button type="text" class="headBtn" >加密</button>
<button class="headBtn" >解密</button>
</view>
<view class="passAndEncrypt">
<input class="encryptedPass" />
<button class="encryptedTextBtn" >粘贴密文</button>
</view>
<textarea />
.wxss代码如下:
.head,.passAndEncrypt,textarea{
box-sizing: border-box;
display: block;
padding:0px;
margin-left:auto;
margin-right:auto;
width:89.375%;
min-width: 310px;
}
.head{
padding-top:20px;
}
.passAndEncrypt{
height:42px;
}
.headBtn{
display: inline-block;
width:50%;
text-align:center;
margin:0px;
padding:0px;
background-color:white;
border-radius: 0px;
border-color: white;
color: gray;
font-size:14px;
}
.encryptedPass{
float: left;
border:1px solid rgb(220,220,220);
border-radius: 3px;
padding-left: 4px;
margin:0px;
height: 40px;
background-color:white;
width:50%;
/* text-overflow:clip; */
overflow:hidden;
white-space:nowrap;
}
.encryptedTextBtn{
font-size: 14px;
float: right;
margin:0px;
width:50%;
background-color:#CC3333;
color:white;
height: 40px;
/* border-radius:0px; */
overflow:hidden;
}
.textarea{
border:1px solid rgb(220,220,220);
padding:6px;
line-height:20px;
margin-top:20px;
height:150px;
border-radius:3px;
background-color:white;
}
从上面可以看出来:解密密码和点击解密整体下移了
原因:是因为解密密码和点击解密两个加起来的宽度超过了父元素的宽度,如上面红色字体所示,所以修改子组件的宽度并为父组件添加属性overflow,如下面所示:
.head,.passAndEncrypt,textarea{
box-sizing: border-box;
display: block;
padding:0px;
margin-left:auto;
margin-right:auto;
width:89.375%;
min-width: 310px;
overflow:hidden;
}
encryptedPass{
float: left;
border:1px solid rgb(220,220,220);
border-radius: 3px;
padding-left: 4px;
margin:0px;
height: 40px;
background-color:white;
width:47%;
/* text-overflow:clip; */
overflow:hidden;
white-space:nowrap;
}
.encryptedTextBtn{
font-size: 14px;
float: right;
margin:0px;
width:47%;
background-color:#CC3333;
color:white;
height: 40px;
/* border-radius:0px; */
overflow:hidden;
}
显示效果:
总结:在微信小程序中,模拟机和真机上效果不一样,或者UI布局混乱的原因之一是子组件的宽度(高度)超过了父组件的宽度(高度),因此在布局中一定要注意子组件和父组件的宽度问题,否则很容易导致bug;除此之外,属性overflow:hidden一般配合box-sizing:border-box使用