@vueuse/core数据懒加载方法

适合项目Vue3,作用就是每当你向下滚动的时候,视口进入了可视范围内,我们才发送axios请求,避免了数据量大的时候一次性加载导致卡顿,这种懒加载适合商城首页.

不废话教程开始

先下载一款插件,名字叫做@vueuse/core

根目录cmd打开小黑框

输入命令下载依赖包npm i @vueuse/core

新建一个文件Ts或者Js文件

建好之后代码如下

// 导入判断元素是否出现在可视区域的方法
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

// 封装一个数据懒加载的方法
export function dataLazy (callback: () => void) {
  // 创建判断的元素
  let target = ref(null)
  // 判断元素
  let { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // 执行一段逻辑代码
        callback()
        // 结束判断
        stop()
      }
    },
    {
      threshold: 0 // 让元素只要有一个像出现在可视区域中时就会触发函数
    }
  )
  return target
}

搞定,这是一个全局方法

那么如何去使用它呢??

我们先建一个测试页面

<script setup lang="ts">
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
let myimg = ref<HTMLImageElement | null>(null)
useIntersectionObserver(myimg, ([{ isIntersecting }]) => {
  // isIntersecting: boolean值，判断元素是否出现在可视区域
  // console.log(isIntersecting)
  if (isIntersecting) {
    // 说明图片出现在可视区域，设置图片的地址
    myimg.value!.src =
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F17%2F20150417H1932_jBFR5.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665460210&t=3b207f4fc764701524bdf596b39613e8'
  }
})
</script>
<template>
  <h2>测试页面</h2>
  <h3>1.0 判断元素是否出现在可视区域</h3>
  <div class="con"></div>
  <img ref="myimg" alt="" />
</template>
<style scoped lang="less">
.con {
  width: 800px;
  margin: 0 auto;
  background: pink;
  height: 1000px;
}
</style>

打开测试页面,注意这个适合还没滚到到底部的图片,证明数据还没有发送,因为视口还没到达触发区域

好,我们滚动

好,测试完毕,证明懒加载是有效的

我们来到项目中使用

import { dataLazy } from '@/utils/tools'

// 懒加载数据
let target = dataLazy(getProductList)

// 你想要懒加载的区域
<div class="home-product" ref="target"></div>

完结,有什么不懂可以私信