官方文档

首页主体-组件数据懒加载

目的: 实现当组件进入可视区域在加载数据。

我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为,但是必须配合vue3.0的组合API的方式才能实现。

大致步骤:

  • 理解 useIntersectionObserver 的使用,各个参数的含义
  • 改造 home-new 组件成为数据懒加载,掌握 useIntersectionObserver 函数的用法
  • 封装 useLazyData 函数,作为数据懒加载公用函数
  • home-newhome-hot 改造成懒加载方式

首先下载包npm i @vueuse/core@5.3

要5.3版本,其他版本可能有bug

落地代码:

  1. 先分析下这个useIntersectionObserver 函数:
// const {stop} = useIntersectionObserver(target, fn, options)
// 1、参数一target表示被监听的DOM元素
// 2、参数二是回调函数,用于通知监听的动作(回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区)
// 3、表示配置选项
// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器,必须是dom容器,而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域,true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断,然后做业务
  },
)
  1. 开始改造 home-new 组件:rc/views/home/components/home-new.vue
  • 进入可视区后获取数据
<div ref="box" style="position: relative;height: 406px;">
// 省略。。。
<script>
import HomePanel from './home-panel'
import HomeSkeleton from './home-skeleton'
import { findNew } from '@/api/home'
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  name: 'HomeNew',
  components: { HomePanel, HomeSkeleton },
  setup () {
    const goods = ref([])
    const target = ref(null)
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          stop()
          findNew().then(data => {
            goods.value = data.result
          })
        }
      }
    )
    return { goods, target }
  }
}
</script>

总结:监听DOM元素进入可视区,进入后停止监听,并且调用接口获取数据

  1. 由于首页面板数据加载都需要实现懒数据加载,所以封装一个钩子函数,得到数据。

src/hook/index.js

// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (apiFn) => {
  // target表示组件的最外层div元素
  const target = ref(null)
  // 懒加载接口返回的数据
  const result = ref([])
  // 监听组件是否进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 如果target对应的DOM进入可视区,那么该回调函数就触发
    if (isIntersecting) {
      // 被监听的DOM进入了可视区:此时调用接口获取数据;停止继续监听
      stop()
      apiFn().then(data => {
        result.value = data.result
      })
    }
  }, {
  //threshold 容器和可视区交叉的占比(进入的面积/容器完整面试) 取值,0-1 之间,默认比0大,所以需要滚动较多才能触发进入可视区域事件。
      threshold: 0
    }
 )
  // result表示接口懒加载获取的业务数据
  // target表示被监听的DOM元素,需要在模板中被ref属性绑定
  return { result, target }
}
  1. 再次改造 home-new 组件:rc/views/home/components/home-new.vue
import { findNew } from '@/api/home'
+import { useLazyData } from '@/hooks'
export default {
  name: 'HomeNew',
  components: { HomePanel, HomeSkeleton },
  setup () {
+    const { target, result: goods } = useLazyData(findNew)
+    return { goods, target }
  }
}
+ <div ref="target" style="position: relative;height: 426px;">
Logo

前往低代码交流专区

更多推荐