小程序开发 - 图片懒加载

最新推荐文章于 2024-08-03 05:52:51 发布

晓晓攻城师

最新推荐文章于 2024-08-03 05:52:51 发布

阅读量293

点赞数

文章标签：图片懒加载微信小程序 js

本文链接：https://blog.csdn.net/qq_26245325/article/details/103282288

版权

微信小程序开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

小程序开发 - 图片懒加载

一、获取屏幕高度

wx.getSystemInfo({
      success: (res)=> {
        this.data.height = res.windowHeight;
      }
    })

二、获取图片top

wx.createSelectorQuery().selectAll('.item_li').boundingClientRect((e) => {
                    e.forEach((dom) => {
                        this.data.images[dom.dataset.i][dom.dataset.j].top = dom.top;
                    });
                }).exec();

三、监听scroll


	scroll: function (e) {
        let scroll = e.detail.scrollTop;
        if (this.data.lazyloadInteger > 0) {
        // 防止多次进行渲染
            clearTimeout(this.data.lazyloadInteger)
        }
        this.data.lazyloadInteger = setTimeout(() => {
            this.showImg(scroll);
        }, 500)
    }
    ,showImg: function(scrollTop) {
        let images = this.data.images;
        let height = this.data.height + scrollTop;  // 页面的可视高度
        for (let i in images) {
            for (let j in images[i]) {
                if (!images[i][j].show && height >= images[i].images[j].top) {
                    this.setData({[`images[${i}].[${j}].show`]: true});
                }
            }
        }
}