• Vue3-无限滚动的懒加载-本地数据操作版


    CSDN话题挑战赛第2期
    参赛话题:学习笔记

    *学习之路,长路漫漫,写学习笔记的过程就是把知识讲给自己听的过程。


    🦖我是Sam9029,一个前端

    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

    **🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**


    UnlimitedSwiper(本地数据操作版)

    Vue3-无限滚动的懒加载-本地数据操作版

    之前写了一个 原生JS 的无限懒加载 图片滚动

    使用的是 scroll + getBouningClientRect 来实现

    项目地址:Infinite-Scroll-Img - 码上掘金 (juejin.cn)

    以及讲解:

    无限滚动图片懒加载-Infinite-Scroll-Img-笔记学习_Sam9029的博客-CSDN博客

    这一次 我尝试着 在 Vue(Vue3) 框架中 来实现 这个效果

    场景 :Vue3 响应式 实现 无限滚动 的懒加载 (本地数据操作版)

    并将使用JS 的原生 IntersectionObserver 构造函数API (专门用于懒加载和无限滚动的场景)r

    关于 getBouningClientRect 和 IntersectionObserver

    请看:懒加载的实现 – 两种方式 — 一种5行JS实现懒加载_Sam9029的博客-CSDN博客 (附带了 demo 演示效果的源码)

    需求

    • 使用 IntersectionObserver 来实现懒加载 的判断

      • IntersectionObserver 可实现未出现视图前的监听,加载后的取消监听,性能更好
    • 适配图片的长度的适配(此案例,定宽)

      • 效果示意
      • 请添加图片描述
    • 图片区域滚动实现 下方图片无限制新增


    效果及源码

    源码地址:Vue3-无限滚动的懒加载-本地数据操作版 - 码上掘金 (juejin.cn)

    效果展示:上传不了 gif ,请看链接吧


    思路及实现

    • DOM 结构

      • 大盒子 (无限滚动的区域)
        • 图片无限加载的盒子 (实现无限滚动)
        • loding 加载中的盒子(被IntersectionObserver 监听 )
    • 响应式 渲染 数据源

      • 数组包对象
        • 对象中再含所有需要渲染的图片数据URL
    let renderImgList = ref([
        {
            unlimitSwiperContSignID:'01',
            imgUrl:[
                "https://c2.im5i.com/2022/08/29/ureH7.jpg",
                "https://c2.im5i.com/2022/08/29/urzL2.jpg",
                "https://c2.im5i.com/2022/08/29/urIZw.jpg",
            ]
        },
        {
            unlimitSwiperContSignID:'02',
            imgUrl:[
    			// 与 上面一致 ,只是图片地址不一样
            ]
        },
        {
            unlimitSwiperContSignID:'03',
            imgUrl:[
    			// 与 上面一致 ,只是图片地址不一样
            ]
        },
        {   
            unlimitSwiperContSignID:'04',
            imgUrl:[
    			// 与 上面一致 ,只是图片地址不一样
            ]
        },
    ])
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    let imgObserver = new IntersectionObserver(callback)
    //把callback 写在 外面,方便理解,亦可直接写在构造函数参数内
    function callback(entries){
        console.log('执行懒加载监听')
        //entries 可接受
    
        //被观察的 图片数组对象 
        entries.forEach(item=>{
            // 调用 被观察的目标元素 是否 与可视窗口 出现交叉区域
            if(item.isIntersecting){
                //获取 被观察的目标元素
                const targetImg = item.target
                
                requsetNewImg()
    
                // 在懒加载完成后可执行 停止观察,节约性能资源
                // 此处并 需要 取消 监听 ,图片新增后,loading 就会 被新图片挤到不可视区域,待下一次出现在被监听
                // imgObserver.unobserve(targetImg)
            }
        })
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 使用 函数 定义新增图片数据 url 的功能
      • 需要loading被监听到(此处再下一步说明),出现再可视化区域·时触发
    // 新增 图片
    function requsetNewImg(){
     let increaseImgList = []
    
     for(let i=0;i<4;i++){
         let index = Math.floor(Math.random()*imgListDataBase.length)
         // increaseImgList.push(imgListDataBase[index])
    
         // 向 响应式 的图片渲染数据源 新增新图片
         renderImgList.value[i].imgUrl.push(imgListDataBase[index])
     }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 对 loading 加载图标 实现监听 ,其实步骤
      • 第一步 使用 ref 绑定 loading所在的标签
      • 第二步,再生命周期钩子函数 onMounted() 中实现监听
        • ref 定义的绑定 只能再页面加载完成后 在能获取得到
    onMounted(()=>{
        // 一定要等 加载完成后 才能 获取  ref 绑定的 imgRenderBox
        console.log(loadingMore.value)
        imgObserver.observe(loadingMore.value)
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5

    待改进

    • 改进不需要每次都 滚动到 loading 出现 才开始新增图片

    拓展

    当然如果,这样就满足的话,是不会进步的,进一步的模拟真实的客户端环境下当然就必须使用 网络请求 来获取图片,此时我们将会 进一步修改需求和相应的功能优化,来满足实际的客户端场景

    • 进一步 我将使用fastmock 来 本地模拟 请求数据加载,的无限滚动图片
    • 文章链接

    🦖我是Sam9029,一个前端

    文章若有错误,敬请指正🙏

    **🐱‍🐉🐱‍🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**

    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

  • 相关阅读:
    EasyExcel实现复杂导入 适用于导入1对N类型数据如组合商品,订单和订单明细等等
    [量子计算与量子信息] 2.1 线性代数
    LandingSite电子标签Quuppa固件进入DFU状态说明
    redis 复制集群搭建
    消息机制篇——初识消息与消息队列
    第二十二篇:稳定性之服务等级协议
    Unity的UI面板基类
    CPU监控工具(CPU使用率及CPU温度监控)
    采用策略分布曲线评估信用风险模型的效果
    (最优化理论与方法)第六章无约束优化算法-第一节:线搜索方法
  • 原文地址:https://blog.csdn.net/m0_61486963/article/details/126990190