uniapp小程序如何实现图片懒加载

在uniapp小程序中，可以使用uni-image组件来实现图片懒加载。uni-image组件内置了lazy-load属性，可以实现图片在滚动到可视区域时才加载。

具体实现步骤如下：

1. 在template中引入uni-image组件，并设置src和lazy-load属性。

<uni-image src="your-image-source" lazy-load></uni-image>

2. 在script中设置页面滚动事件，监听图片是否进入可视区域。

onPageScroll(e) {
    uni.createSelectorQuery().selectAll('.lazy-img').boundingClientRect((rects) => {
        rects.forEach((rect, index) => {
            if (rect.top < uni.getSystemInfoSync().windowHeight) {
                this.$set(this.lazyImgs, index, this.imgList[index])
            }
        })
    }).exec()
}

3. 在data中定义lazyImgs数组，用来存放已经进入可视区域的图片。

data() {
    return {
        imgList: [
            'your-image-source-1',
            'your-image-source-2',
            'your-image-source-3'
        ],
        lazyImgs: []
    }
}

4. 在template中使用v-for指令遍历lazyImgs数组，动态渲染已经进入可视区域的图片。

<uni-image v-for="(img, index) in lazyImgs" :key="index" class="lazy-img" :src="img"></uni-image>

这样就可以实现uniapp小程序的图片懒加载了。