<view class="image">
<image src="{{arry[index] ? val.thumbnail: 'https://cdn.kuso.xyz/dailyTest/img/lazy.png'}}" class="{{arry[index] ?'Action':''}}"></image>
</view>
Action {
opacity: 1;
}
image{
opacity: 0;
transition: opacity 0.2s linear 0.2s;
}
data: {
arry: [], //是否显示图片
heihgt: 0, //屏幕高度
}
onLoad: function(options) {
var that = this;
that.imgLazy(1) 1为:初始化arry除了屏幕可见的元素 其他为false
wx.getSystemInfo({
success: res => {
that.setData({
height: res.windowHeight,
})
}
})
},
onPageScroll: function(res) {
let that = this;
that.imgLazy()
},
imgLazy: function(type) { //懒加载
let that = this;
wx.createSelectorQuery().selectAll('.list').boundingClientRect((ret) => {
ret.forEach((item, index) => {
if (item.top <= that.data.height) that.data.arry[index] = true;
else if (type) that.data.arry[index] = false;
})
that.setData({
arry: that.data.arry
})
}).exec()
},
小程序 懒加载图片
最新推荐文章于 2021-03-24 11:14:36 发布