小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

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

发布时间：2018-02-06 14:41 所属栏目：小程序开发教程

 

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

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

.wxml代码如下：

 


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




	.wxss代码如下：



	 




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




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



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



	 




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




	显示效果：



	



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

            


            


            

            

                

                    易优小程序（企业版）+灵活api+前后代码开源
                    码云仓库:starfork
                

                

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

            

          

          

            
            

            
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

          

          


        

      

      

        

          

                        

              

                

                  
                  
                

              

                        

                      

          

            
            

              
              
            

          

        

      

    

  







  

    

            

        
产品

        
      

            

        
服务

        
      

            

        
帮助

        
      

            

        
关于

        
      

            
   
        
工作日 8:30-12:00 14:30-18:00 

          周六及部分节假日提供值班服务

        联系我们 

    

  









  
  

    
    
    

    

    在线客服 
    

      
    

    

      

        
 
          

          

        

      

      
 

      

    

  






 



    

        
            易小优
            
        
        

                        转人工
                        ×