微信小程序:常见bug 和 解决方案
1. 小程序进入页面图片渲染会拉伸闪下变形优化
参考文档:https://www.jianshu.com/p/bdaf34809a89
需求:
有些从接口传递过来的图片,本身图片大小不是固定一个比例,全部渲染显示在页面上,会有唰得拉伸从大到小快速闪下变形的bug,很影响用户体验。
解决方法:
image的mode图片剪裁缩放模式用
mode='widthFix'
(宽度不变,高度自动变化,保持原图宽高比不变),记得要在css里也加上
height:auto
,可以消除渲染拉伸变形一闪而过的bug。
<image src='...' style='width:98%;height:auto' mode='widthFix'></image>
补充知识:
image
的mode有13种模式,4种是缩放模式,9种是剪裁模式缩放模式:
scaleToFill
——不保持纵横比缩放图片,使图片宽高完全拉伸至image元素widthFix
——保持宽度固定,高度自动变化,意思保持原图宽高比aspectFit
——保持纵横比缩放图片,使得长边露出,意思是能完全展示图片aspectFill
—— 保持纵横比缩放图片,使得短边露出,意思是一个方向是完整的,另一个方向会发生截取剪裁模式:
top
——不缩放,只显示顶部bottom
——不缩放,只显示底部center
——不缩放,只显示中间left
——不缩放,只显示左边right
——不缩放,只显示右边top right
——不缩放,只显示右上top left
——不缩放,只显示左上bottom left
——不缩放,只显示左下bottom right
——不缩放,只显示右下