CSDN话题挑战赛第2期
参赛话题:学习笔记
*学习之路,长路漫漫,写学习笔记的过程就是把知识讲给自己听的过程。
🦖我是Sam9029,一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
**🐱🐉🐱🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**
Vue3-无限滚动的懒加载-本地数据操作版
之前写了一个 原生JS 的无限懒加载 图片滚动
使用的是 scroll + getBouningClientRect 来实现
项目地址:Infinite-Scroll-Img - 码上掘金 (juejin.cn)
以及讲解:
这一次 我尝试着 在 Vue(Vue3) 框架中 来实现 这个效果
场景 :Vue3 响应式 实现 无限滚动 的懒加载 (本地数据操作版)
并将使用JS 的原生 IntersectionObserver 构造函数API (专门用于懒加载和无限滚动的场景)r
关于 getBouningClientRect 和 IntersectionObserver
请看:懒加载的实现 – 两种方式 — 一种5行JS实现懒加载_Sam9029的博客-CSDN博客 (附带了 demo 演示效果的源码)
使用 IntersectionObserver 来实现懒加载 的判断
适配图片的长度的适配(此案例,定宽)
图片区域滚动实现 下方图片无限制新增
源码地址:Vue3-无限滚动的懒加载-本地数据操作版 - 码上掘金 (juejin.cn)
效果展示:上传不了 gif ,请看链接吧
DOM 结构
响应式 渲染 数据源
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:[
// 与 上面一致 ,只是图片地址不一样
]
},
])
定义观察者函数
关于 观察者函数
的使用 可看
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
// 新增 图片 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
onMounted()
中实现监听
onMounted(()=>{ // 一定要等 加载完成后 才能 获取 ref 绑定的 imgRenderBox console.log(loadingMore.value) imgObserver.observe(loadingMore.value) })
- 1
- 2
- 3
- 4
- 5
当然如果,这样就满足的话,是不会进步的,进一步的模拟真实的客户端环境下当然就必须使用 网络请求 来获取图片,此时我们将会 进一步修改需求和相应的功能优化,来满足实际的客户端场景
文章若有错误,敬请指正🙏
**🐱🐉🐱🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主