微信小程序中，真机和模拟器效果不一样

古城微笑少年丶 2022-06-09 03:57 983阅读 0赞

问题：有时候，在模拟器上UI效果显示正常，但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性

box-sizing: border-box;子组件加起来的宽度超过了父组件的宽度，从而导致显示的效果是：父组件还是正常显示在原来设定的位置

上，而子组件则往下移动了，导致UI变乱。按照常理，当子组件的宽度大于父组件的宽度，会把父容器这个盒子给撑大，但是在微信小程序中，父容器还是原来设定的那么大，显示在原来位置，子组件则是往下移动，导致UI显示不正常。

解决方法：父组件要一起使用属性box-sizing: border-box;和overflow:hidden;注意子组件和父组件的宽度问题

.wxml代码如下：

.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;
    }

![Center][]

从上面可以看出来：解密密码和点击解密整体下移了

原因：是因为解密密码和点击解密两个加起来的宽度超过了父元素的宽度，如上面红色字体所示，所以修改子组件的宽度并为父组件添加属性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; 
    }

显示效果：

![Center 1][]

总结：在微信小程序中，模拟机和真机上效果不一样，或者UI布局混乱的原因之一是子组件的宽度（高度）超过了父组件的宽度（高度），因此在布局中一定要注意子组件和父组件的宽度问题，否则很容易导致bug；

除此之外，属性overflow:hidden一般配合box-sizing:border-box使用

[Center]: /images/20220609/e4800981d251444298c91db278f65d15.png
[Center 1]: /images/20220609/8e3ee926bd504aa48f8a74207d37d8e2.png