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:[
			// 与 上面一致 ，只是图片地址不一样
        ]
    },
])

• 定义观察者函数

  • 关于 观察者函数 的使用 可看

  • 此文 ：JS-工具类懒加载的实现 – 两种方式 — 一种5行JS实现懒加载_Sam9029的博客-CSDN博客

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)
        }
    })
}

• 使用 函数 定义新增图片数据 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])
 }
}

• 对 loading 加载图标 实现监听 ，其实步骤
  • 第一步 使用 ref 绑定 loading所在的标签
  • 第二步，再生命周期钩子函数 onMounted() 中实现监听
    • ref 定义的绑定 只能再页面加载完成后 在能获取得到

onMounted(()=>{
    // 一定要等 加载完成后 才能 获取  ref 绑定的 imgRenderBox
    console.log(loadingMore.value)
    imgObserver.observe(loadingMore.value)
})

---

待改进

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

---

拓展

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

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

---

🦖我是Sam9029，一个前端

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

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

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