Vueuse包提供的useIntersectionObserver 方法如何使用（参数；返回值）实现无限下拉信息流

水深无声 2022-09-14 11:26 3阅读 0赞

基于 IntersectionObserver 异步监听方法，实现无线信息流下拉加载，

<template>
        <div id="app">
    
            <div class="view-list">
    
                <div class="item" v-for="(item,index) in itemData" :key="index">账号ID：{
       {index}}</div>
                <div class="item" id="loading">加载中</div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: 'App',
            components: {
            },
            data(){
                return {
                    itemData:[]
                }
            },
            methods:{
                // 获取随机数
                getRange(){
                    let id = new Date().getTime();
                    return Math.random()*id;
                },
                // 触发监听回调
                loadList(status){
                    status = status[0];
                    let isShow = status.isIntersecting;
                    if(isShow){
                        console.log("加载中 ---- ");
                        for(let i = 4;i>=0;i--){
                            this.itemData.push({id:this.getRange()})
                        }
                    }else {
                        console.log('不加载');
                    }
                }
            },
            created() {
                // 3. 初始化循环渲染的列表
                for(let i = 4;i>=0;i--){
                    this.itemData.push({id:this.getRange()})
                }
            },
            mounted() {
                //    4. 挂载时，获取列表的容器元素，然后设置监听
                //  使用官方提供的新接口：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
                /**
                 * callback : 回调函数，可见时 和 不可见时，都触发
                 * options ：配置参数，
                 *      root ：根元素，默认是视图
                 *      threshold ： 交叉比例。也就是在跟元素出现的比例
                 */
                // 5. 初始化观察对象
                let io = new IntersectionObserver(this.loadList, {});
                // 6. 获取被监听元素
                let viewList = document.getElementById('loading');
                // 7. 在观察对象上，监听 6 中获取的对象
                io.observe(viewList);
            },
        }
    </script>
    
    <style>
        .view-list{
            width: 100%;
            height: 500px;
            margin:20px 0;
            overflow-x: scroll;
            background-color: rgba(0, 0, 255, 0.25);
        }
        .item{
            height: 50px;
            border:1px gray solid;
            margin-bottom: 10px;
        }
    </style>

原理

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来判断，然后做业务
     },
    )

### **业务功能场景** ###

**基于该方法实现组件的懒加载**

第一步:在SRC下封装一个钩子函数,src/hooks/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
          })
        }
      })
      // result表示接口懒加载获取的业务数据
      // target表示被监听的DOM元素，需要在模板中被ref属性绑定
      return { result, target }
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6buY54S255u454ix6bG86bG86bG8_size_12_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6buY54S255u454ix6bG86bG86bG8_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4ed00b660e704e0c87ef7c46b7e1a3bd.png