vue.js 3.2.22：用useIntersectionObserver監控多行數據的可見性(@vueuse/core@7.0.3)

一，安裝所需的庫@vueuse/core

liuhongdi@lhdpc:/data/vue/lazy$ npm install --save @vueuse/core

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，編寫代碼

Visible.vue

<template>
  <div>
    <div>
      <div data-bg="0" v-for="item in 5" :key="item" :ref="setItemRef" style="height: 500px;">
        {{item}}
      </div>
    </div>
  </div>
</template>
<script>
import {onMounted} from "vue";
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }

    //掛載后
    onMounted(()=>{
      //為各個div添加監控事件
      console.log("onMounted div的數量:"+itemRefs.length);
      for (let i=0;i<itemRefs.length;i++) {
        console.log(itemRefs[i]);
        useIntersectionObserver(itemRefs[i], ([{ isIntersecting }]) => {
          // 如果target對應的DOM進入可視區，那么該回調函數就觸發
          if (isIntersecting) {
            // 被監聽的DOM進入了可視區:此時調用接口獲取數據；停止繼續監聽
            stop()
            if (itemRefs[i].dataset.bg === '0') {
              console.log("第"+i+"個div已顯示");
              //修改背景色
              itemRefs[i].dataset.bg = 1;
              itemRefs[i].style.background=getColor(i);
            }

          }
        })
      }
    })

    //返回顏色，使各個div區分開
    const getColor = (idx) => {
        if (idx == 0){
          return "#ffff00";
        } else if (idx == 1) {
          return "#ff00ff";
        } else if (idx == 2) {
          return "#00ffff";
        } else if (idx == 3) {
          return "#0000ff";
        } else if (idx == 4) {
          return "#00ff00";
        } else {
          return "#ff0000";
        }
    }

    return {
      setItemRef,
      print
    }
  }
}
</script>

 

三，測試效果

1,剛打開時：

 

 查看log:

 

 從調試信息中可以看到只有兩個div被判斷為可見

2，向下滑動后：

 

 查看調試信息:

 

 可以看到前四個div都被判斷為可見

四，查看vue和vueuse的版本

liuhongdi@lhdpc:/data/vue/lazy$ npm list vue
lazy@0.1.0 /data/vue/lazy
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.22 deduped
├─┬ @vueuse/core@7.0.3
│ ├─┬ @vueuse/shared@7.0.3
│ │ └── vue@3.2.22 deduped
│ ├─┬ vue-demi@0.12.1
│ │ └── vue@3.2.22 deduped
│ └── vue@3.2.22 deduped
└─┬ vue@3.2.22
  └─┬ @vue/server-renderer@3.2.22
    └── vue@3.2.22 deduped