微信小程序实现图片懒加载的方法

使用wx.createIntersectionObserver实现，官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html

需要展示的列表groupGoodsList，
图片是否展示用show 控制

通过判断元素的相交比例是否大于0来判断图片是否显示在屏幕中
注：show为false图片不展示时也应该保留占位

wxml:
给列表元素添加class：‘other-goods-item-’ + index

<view class="other-goods-item {{ 'other-goods-item-' + index }}" wx:for="{{ groupGoodsList }}" wx:key="index">
	<view class="goods-item-img">
        <image wx:if="{{ item.show }}" src="{{ filter.getUploadImage(item.picUrl) }}" mode="aspectFill"></image>
    </view>
</view>

js：

let groupGoodsList = res.data.groupGoodsList
  for(let i = 0; i < groupGoodsList.length; i++) {
       wx.createIntersectionObserver(this).relativeToViewport().observe('.other-goods-item-'+ i, (ret) => {
           if (ret.intersectionRatio > 0 && groupGoodsList[i].show != true){ // 当元素出现，设置show为true
               groupGoodsList[i].show = true 
               this.setData({
	               groupGoodsList
	           })
           }
     })
 }