Vue3-Lazy Loading of Infinite Scrolling-Mock Version of Simulating Network Requests

Sam9029 2022-09-23 08:04:44 阅读数:455

vue3-lazyvuelazyloadinginfinite

UnlimitedSwiper(模拟网络请求Mock版)+ fastMock入门使用

🦖我是Sam9029,一个前端

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

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

Vue3-无限滚动的懒加载-模拟网络请求Mock版

这一次 We keep trying 在 Vue(Vue3) 框架中 来实现 这个效果

但是不同与 上一次 local data operations

这一次 我将使用 fastMock 来模拟客户端 网络请求 来实现 A network request is made when an image is added 以获得 图片数据

同时介绍 fastMock 的基础使用

其他介绍:

如果对 UnlimitedSwiper(本地数据操作版)感兴趣 请看:Vue3-无限滚动的懒加载-本地数据操作版_Sam9029的博客-CSDN博客

使用的是 本地的响应式 数据 进行操作

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

关于 getBouningClientRect 和 IntersectionObserver

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

需求

  • 使用fastmock 来 本地模拟 请求数据加载

  • fastmock 的入门使用

  • 使用 axios 来网络请求 获取 新图片

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

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

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


fastMock入门

Introduction here 仅为 Take this case result-oriented Introduction to getting started

  • 官网 注册账户129.204.116.48:3000/#/ (不知道为什么 faskMock 直接使用IP 没有 使用域名)

  • 新建项目 ,Create the find page新增接口

  • 根据要求 Set the interface information

    • The returned data can also be set by yourself
  • 找到预览A request to test the interface

See for more details,Recommend this article:fastmock的基本使用_Zhang Haizhi_的博客-CSDN博客_fastmock怎么使用


效果及源码


思路及实现

  • DOM 结构
  • 响应式 渲染 数据源
  • 定义观察者函数
  • 使用 函数 定义新增图片数据 url 的功能
  • 对 loading 加载图标 实现监听 ,步骤

以上的 需求步骤 详情 请看 :Vue3-无限滚动的懒加载-本地数据操作版_Sam9029的博客-CSDN博客

  • 网络 请求 实现 Added image data 获取
    • 记得先 引入 axios
// 定义axios 网络 新的图片
function getNewImg(){

return axios({

url:"https://www.fastmock.site/mock/487ce52a34728d191dbc36bd19fd5294/testUnlimitSwiper/getPhoto",
method:'GET',
})
}
  • 此时注意:A function to update the image Corresponding changes have also occurred
// 新增 图片
async function requsetNewImg(){

// 使用 网络请求 
let resData = await getNewImg()
// 其实 应该 根据 本案例 的需求 来 说 ,Should return here Four picture link data
let newImgData = resData.data.data.imgList;
for(let i=0;i<4;i++){

let index = Math.floor(Math.random()*newImgData.length)
// 向 响应式 的图片渲染数据源 新增新图片
renderImgList.value[i].imgUrl.push(newImgData[index])
}
}

待改进

  • According to the needs of the case 优化请求 的数据格式

    • 目前 used in the case 请求返回数据 是一整个 图片链接url的数组
  • 有一个问题 监听 loading 的 标签才能实现 懒加载 's new image

    • Improve reservations:Monitor the last frame of each box 图片 When the last one appears at the end of the view,Add image loading

l的数组`

  • 有一个问题 监听 loading 的 标签才能实现 懒加载 's new image

    • Improve reservations:Monitor the last frame of each box 图片 When the last one appears at the end of the view,Add image loading

🦖我是Sam9029,一个前端

文章若有错误,敬请指正

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

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

版权声明:本文为[Sam9029]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/266/202209230727271953.html