实现小程序image图片宽度100%高度自适应

因为微信小程序的图片image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为图片高度默认240px

只需要添加属性 mode="widthFix"

<image class="img" src="../images/1.png" mode="widthFix">

设置宽度100%，

.img{width: 100%}

这样就可以实现图片宽度100%高度自适应，图片不会拉伸

onReachBottom方法为微信小程序自带上拉加载方法，开发过程中遇到页面上拉不生效问题，尝试以下几种方法：

1.json文件中添加"onReachBottomDistance"，测试没有生效；

2.page 添加固定高度100%: page{height:100%} 测试也没生效

3.页面最外层盒子添加高度，自己写的是 view {min-height:101vh} 实测有效

总结：

问题出现原因 =>页面内容高度小于屏幕高度

有其他方法的可留言推荐。

小程序的image组件提供了缩放的模式选择，默认的scaletofill就是设置固定的宽高模式比较少使用，更多的是需要自适应宽高的情况。

widthfix多适用于通栏，width:100%,高度不同设备自适应的情况。此时会按照原图比列自动缩放高度，常用于轮播图。

aspectFill多用用在固定大小的范围内显示，区别是可以保留一边，除去通栏外一般用处较多。

个别情况下需要图片始终居中缩放，多用在用户头像圆环之类，一般留在保留中心内容的部分，文档中暂没，需要单独设置。

---