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

使用wx.createIntersectionObserver实现，官方文档：

https://developers./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.groupGoodsListfor(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为truegroupGoodsList[i].show = true this.setData({groupGoodsList})}})}