小程序模板网

微信小程序--真机和模拟器效果不一样解决方案

 

问题:有时候,在模拟器上UI效果显示正常,但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性box-sizing:border-box;子组件加起来的宽度超过了父组件的宽度,从而导致显示的效果是:父组件还是正常显示在原来设定的位置上,而子组件则往下移动了,导致UI变乱。按照常理,当子组件的宽度大于父组件的宽度,会把父容器这个盒子给撑大,但是在微信小程序中,父容器还是原来设定的那么大,显示在原来位置,子组件则是往下移动,导致UI显示不正常。

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

.wxml代码如下:

 

  1. <view class="head">
  2. <button type="text" class="headBtn" >加密</button>
  3. <button class="headBtn" >解密</button>
  4. </view>
  5. <view class="passAndEncrypt">
  6. <input class="encryptedPass" />
  7. <button class="encryptedTextBtn" >粘贴密文</button>
  8. </view>
  9. <textarea />

.wxss代码如下:

 

  1. .head,.passAndEncrypt,textarea{
  2. box-sizing: border-box;
  3. display: block;
  4. padding:0px;
  5. margin-left:auto;
  6. margin-right:auto;
  7. width:89.375%;
  8. min-width: 310px;
  9. }
  10. .head{
  11. padding-top:20px;
  12. }
  13. .passAndEncrypt{
  14. height:42px;
  15. }
  16. .headBtn{
  17. display: inline-block;
  18. width:50%;
  19. text-align:center;
  20. margin:0px;
  21. padding:0px;
  22. background-color:white;
  23. border-radius: 0px;
  24. border-color: white;
  25. color: gray;
  26. font-size:14px;
  27. }
  28.  
  29.  
  30. .encryptedPass{
  31. float: left;
  32. border:1px solid rgb(220,220,220);
  33. border-radius: 3px;
  34. padding-left: 4px;
  35. margin:0px;
  36. height: 40px;
  37. background-color:white;
  38. width:50%;
  39. /* text-overflow:clip; */
  40. overflow:hidden;
  41. white-space:nowrap;
  42. }
  43.  
  44. .encryptedTextBtn{
  45. font-size: 14px;
  46. float: right;
  47. margin:0px;
  48. width:50%;
  49. background-color:#CC3333;
  50. color:white;
  51. height: 40px;
  52. /* border-radius:0px; */
  53. overflow:hidden;
  54. }
  55.  
  56. .textarea{
  57. border:1px solid rgb(220,220,220);
  58. padding:6px;
  59. line-height:20px;
  60. margin-top:20px;
  61. height:150px;
  62. border-radius:3px;
  63. background-color:white;
  64. }

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

原因:是因为解密密码和点击解密两个加起来的宽度超过了父元素的宽度,如上面红色字体所示,所以修改子组件的宽度并为父组件添加属性overflow,如下面所示:

 

  1. .head,.passAndEncrypt,textarea{
  2. box-sizing: border-box;
  3. display: block;
  4. padding:0px;
  5. margin-left:auto;
  6. margin-right:auto;
  7. width:89.375%;
  8. min-width: 310px;
  9. overflow:hidden;
  10. }
  11.  
  12. encryptedPass{
  13. float: left;
  14. border:1px solid rgb(220,220,220);
  15. border-radius: 3px;
  16. padding-left: 4px;
  17. margin:0px;
  18. height: 40px;
  19. background-color:white;
  20. width:47%;
  21. /* text-overflow:clip; */
  22. overflow:hidden;
  23. white-space:nowrap;
  24. }
  25.  
  26. .encryptedTextBtn{
  27. font-size: 14px;
  28. float: right;
  29. margin:0px;
  30. width:47%;
  31. background-color:#CC3333;
  32. color:white;
  33. height: 40px;
  34. /* border-radius:0px; */
  35. overflow:hidden;
  36. }

显示效果:

总结:在微信小程序中,模拟机和真机上效果不一样,或者UI布局混乱的原因之一是子组件的宽度(高度)超过了父组件的宽度(高度),因此在布局中一定要注意子组件和父组件的宽度问题,否则很容易导致bug;除此之外,属性overflow:hidden一般配合box-sizing:border-box使用


本文地址:https://www.eyoucms.com/wxmini/doc/course/21600.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询