微信小程序图片懒加载实现
作者:互联网
使用微信提供的 IntersectionObserver
对象
IntersectionObserver
对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见.
在页面渲染开始时,通过这个api指明需要监听的元素,系统会自动去监听元素位置
let data = list;
<view wx:for="{{data}}" wx:for-item="item">
<img class="img-{{index}}" wx:if={{item.ingShow}}></img>
</view>
data.forEach((item,index)=>{
this.createIntersectionObserver().relativeToViewport.observe(`.img-${index}`,res=>{
if (res.intersectionRatio > 0){
this.setData({
item.imgShow:true
})
}
})
})
intersectionRatio
值大于0,说明元素出现在可视范围
标签:index,微信,res,IntersectionObserver,加载,data,intersectionRatio,图片 来源: https://blog.csdn.net/JudyC/article/details/89380428