本前端仔今天调研了一下小程序的图片的懒加载，发现了一个超级简单实用的方案，于是就来分享给大家！
小程序有一个api，可以监听元素是否在出现在屏幕的可见范围内：wx.createIntersectionObserver；
那么，根据这个api，我们在元素进行渲染的时候，把图片url填上，然后再停止监听，节约资源。用完即弃，岂不美哉!😎
简单写一个示例：
Page({
data: {
list: []
},
onLoad() {
// 加载20张图片
let list = []
for(let i = 0; i < 20; i++) {
let item = {
name: '图片' + (i + 1),
url: '',
load: false
}
list.push(item)
}
this.setData({ list: list})
},
// 监听可见性（懒加载）
onReady() {
const that = this
this.data.list.forEach((item, index) => {
const observer = wx.createIntersectionObserver(this)
observer.relativeTo().observe('.list' + index, (res) => {
console.log('图片'+index+'出现了')
if(res.intersectionRatio > 0) {
setTimeout(() => {
that.setData({
[`list[${index}].load`]: true
})
}, 1 * 1000)
// 停止监听
observer.disconnect()
}
})
})
},
})
页面部分：
<scroll-view class="scroll-area" type="list" scroll-y>
<block wx:for="{{list}}" wx:key="index">
<view class="flex-center list{{index}}" style="height: 800rpx; background-color: {{ item.load ? 'red' : 'black' }};">
{{item.name}}:{{item.load ? '加载了' : '未加载'}}
</view>
</block>
</scroll-view>
首先，页面初始状态需要有一定的高度，这样，就不至于一下子都触发监听。
然后我们再思考一下，如何让这个方法更通用，就是封装成一个函数，需要渲染的数据就挂上这个监听。这样，切换数据时也很方便：
lazyListData(list) {
const that = this;
list.forEach((item, index) => {
const observer = wx.createIntersectionObserver(this)
observer.relativeTo().observe('.list' + index, (res) => {
if(res.intersectionRatio > 0) {
// 执行的业务代码.....
// 停止监听
observer.disconnect()
}
})
})
}
同理，如果是什么表格啊，几万➕的列表数据啊，只要是数据量大的，需要下滑操作的，通通可以使用这个逻辑去渲染。
在监听到可见性时填充数据即可!
肥肠简单🥰
源码：上述代码片段
