延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：\n加快页面渲染速度
\n提升页面滚动性能
\n默认不下载屏幕外的图片，减少网络流量
主标题
列表二级标题
exportdefault{
data() {varimgs=['shuijiao','muwu','cbd']varlist=[]for(let i= 0; i< 20; i++) {
list.push({
src: `https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/${imgs[i%3]}.jpg`,
show:false,
loaded:false})
}return{
windowHeight:0,
placeholderSrc:'/static/kechengfengmianmorentu.png',
list: list,
show:false}
},
methods: {
load() {
uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images)=>{
images.forEach((image, index)=>{if(image.top<= this.windowHeight) {this.list[image.dataset.index].show= true;
}
})
}).exec()
},
imageLoad(e) {this.list[e.target.dataset.index].loaded= true}
},
onLoad() {this.windowHeight=uni.getSystemInfoSync().windowHeight
},
onShow() {if(!this.show) {this.show= truesetTimeout(()=>{this.load()
},100)
}
},
onPageScroll() {this.load()
}
}
}.placeholder.loaded{opacity:0;
}.uni-media-list-logo{position:relative;
}.uni-media-list-logo .image{position:absolute;
}
