簡單方法實現(xiàn)Vue?無限滾動組件示例

更新時間：2022年10月31日 08:45:09 作者：腹黑霸道城鄉(xiāng)結合部王鐵牛

這篇文章主要為大家介紹了簡單方法實現(xiàn)Vue?無限滾動組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1. 前言

對于列表類型的大量數(shù)據(jù)，前端展示往往采用分頁和 無限滾動 的方式來展示，對于用戶來說，鼠標滾輪和觸控屏使?jié)L動行為要比點擊更快更容易。 element-plus 組件庫提供了簡單的 vue 指令，就可以輕易的實現(xiàn)

但是 element-plus 只支持無限向下滾動，不支持無限向上滾動，同時也沒缺少豐富的鉤子函數(shù)，我們無法在這個基礎上更好地 利用和改造滾動過程，所以，我們可以自己封裝一個更具有個性化的組件

2. 整體思路

首先，外部的盒子會隱藏內部的盒子 溢出的部分
內部盒子的視圖展示由數(shù)據(jù)提供，每當觸發(fā)向上刷新或者向下刷新的時候，及時更新數(shù)據(jù)，最好的方式是使用 數(shù)組 維護所有的數(shù)據(jù)源，觸發(fā)刷新的時候，只需要 操作數(shù)組 就可以了
怎么界定 向上刷新：這個很簡單，只要滾動的高度接近于 0，就視作向上刷新
怎么界定 向下刷新 呢？

scrollTop：滾動條滾動距離
scrollHeight：滾動條的實際高度
clientHeight：元素的高度

隨著滾動條滾到底部，此時 scrollTop + clientHeight = scrollHeight，那么此時就可以判斷到達底部了

開始

const app = createApp(App);
app.directive('infinite-scroll', {
  mounted(el, binding) {},
});

為什么使用自定義指令實現(xiàn)？

自定義指令 相對于 組件 來說能夠更好地操作dom元素

el 可以訪問被添加指令的元素
通過 binding.value 可以訪問調用指令時傳遞的參數(shù)

  <ul v-infinite-scroll="{}"> // 配置參數(shù)
    <li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
  </ul>

那么我們整體結構和整體思路就有了，就不難寫出如下代碼：

// 為 el 單獨指定類型
type InfiniteScrollEl = HTMLElement & {
  // 給 el 添加一個存儲變量的空間
  [__SCOPE__]: {
    onScroll: () => void;
  };
};
interface DirectiveOpt {
  itemHeight: number; /// 內部每一列數(shù)據(jù)的高度
  rate: number; // 每次更新刷新數(shù)據(jù)的頻率
  load: (dir: 'down' | 'up') => void; // 維護數(shù)據(jù)源的函數(shù)
}
// 獲取并初始化配置選項
const getOptions = (binding: DirectiveBinding<DirectiveOpt>) => {
  const itemHeight = binding.value.itemHeight || 60;
  const rate = binding.value.rate || 1;
  const load = binding.value.load || (() => {});
  return { itemHeight, rate, load };
};
app.directive('infinite-scroll', {
  async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
    await nextTick(); // 確保父元素加載完畢
    const { rate, load } = getOptions(binding);
    const onScroll = () => {
      // 向下刷新
      if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
        for (let i = 0; i < rate; i++) {
          load('down');
        }
      }
      // 向上刷新
      if (el.scrollTop <= 0) {
        for (let i = 0; i < rate; i++) {
          load('up');
        }
      }
    };
    el[__SCOPE__] = {
      onScroll,
    };
    el.addEventListener('scroll', onScroll);
  },
  unmounted(el) {
    const { onScroll } = el[__SCOPE__];
    el.removeEventListener('scroll', onScroll);
  },
});

在組件被完全渲染完畢的時候，立即給 el 添加滾動事件 的處理函數(shù)，同時將這個回調函數(shù)掛載在 el 上，組件被銷毀的時候，刪除滾動事件

調用：

<script lang="ts" setup>
import { reactive } from 'vue';
const dataArr = reactive([1, 2, 3, 4, 5]);
let i = 0;
const load = (dir: 'down' | 'up') => {
  if (dir === 'down') {
    dataArr.push(dataArr.length + 1);
  } else {
    dataArr.unshift(i--);
  }
};
</script>
<template>
  <ul v-infinite-scroll="{ load, itemHeight: 60 }">
    <li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
  </ul>
</template>
<style scoped>
ul {
  padding: 0;
  margin: 0;
  width: 400px;
  height: 200px;
  overflow: auto;
}
li {
  box-sizing: border-box;
  list-style: none;
  margin-bottom: 10px;
  height: 50px;
  background-color: skyblue;
  text-align: center;
  line-height: 50px;
}
</style>

此時會帶來諸多 bug：

第一向下滾動的時候：此時的 scrollTop === 0，會觸發(fā)向上刷新
當滾動條位于頂部的時候無法向上刷新，因為這個時候 scrollTop === 0，向上滾動滾輪無法觸發(fā)滾動事件

這里的解決方案有很多種，我們采用一種比較簡單易懂的方法：

組件加載完畢的時候，給列表頂部 預留一點位置，這樣不會導致第一次向上滾動無法觸發(fā)滾動事件，每次向上滾動的時候，列表頂部刷新多少數(shù)據(jù)，就讓列表的 scrollTop 位于 新數(shù)據(jù)與舊數(shù)據(jù)的分界處

async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
    // ...
    const { rate, load, itemHeight } = getOptions(binding);
    el.scrollTop = itemHeight; // 組件加載完畢，讓列表視口頂部為第二項數(shù)據(jù)
    const onScroll = () => {
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
        for (let i = 0; i < rate; i++) {
          load('down');
        }
        await nextTick(); // 等待新增的元素加載完畢
      }
      if (el.scrollTop <= 10) {
        for (let i = 0; i < rate; i++) {
          load('up');
        }
        await nextTick(); // 等待新增的元素加載完畢
        el.scrollTop = rate * itemHeight;
      }
    };
    // ...
  },

為了解決 滾動條位于頂部的時候無法向上刷新，在觸發(fā)向上滾動的時候，立即改變列表 scrollTop 值，讓列表視口頂部處于 刷新的數(shù)據(jù)的底部，這樣就模擬了模擬了向上刷新的過程了

此外為了防止?jié)L動過程的卡頓，我們讓刷新條件多了 10px 的 緩沖區(qū)域

3. 鉤子函數(shù)

3.1 獲取偏移初始位置的像素值

很多小伙伴可能會問了？這個值不就是 scrollTop？真的是這樣的嗎

一旦觸發(fā)向上更新，原先 scrollTop 記錄的位置隨著新數(shù)據(jù)的增加被 擠下來，那么新的 scrollTop 值代表的一定不是原先位置了

我們得從 getOptions 中多添加一個處理 獲取偏移值的函數(shù)，這個函數(shù)在每次 onScroll 執(zhí)行完畢的時候觸發(fā)

async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
    // ...
+   const { rate, load, itemHeight, scrolledCb } = getOptions(binding);
+   let topAddedPx = 0; // 頂部新增的高度
+   let offset = 0; // 偏移值
    const onScroll = async () => {
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
        for (let i = 0; i < rate; i++) {
          load('down');
+         offset = el.scrollTop - itemHeight - topAddedPx;
        }
        await nextTick(); // 等待新增的元素加載完畢
      }
      if (el.scrollTop <= 10) {
        for (let i = 0; i < rate; i++) {
          load('up');
+         topAddedPx += itemHeight;
        }
        await nextTick(); // 等待新增的元素加載完畢
        el.scrollTop = rate * itemHeight;
      }
+     offset = el.scrollTop - itemHeight - topAddedPx;
+     scrolledCb(offset);
    };
    // ...
  },

首先我們聲明了兩個變量 offset 獲取實時的偏移值，topAddedPx 記錄向上刷新時候新增的高度

在 onScroll 結束的時候 offset 等于 此時的位置 減去 向上刷新時候新增的高度，但是別忘了還要減去 itemHeight，因為在組件初始化的時候，我們預留了一個 itemHeight 的高度

調用：

<script lang="ts" setup>
// ...
const scrolledCb = (offset: number) => {
  console.log(offset);
};
</script>
<template>
  <ul v-infinite-scroll="{ load, itemHeight: 60, scrolledCb }">
    <li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
  </ul>
</template>

3.2 獲取開始滾動和結束滾動的鉤子函數(shù)

有時候，我們需要在 監(jiān)聽 開始滾動 和 結束滾動 的特定時刻

首先，在 getOptions 中多添加一個處理 獲取切換滾動狀態(tài)時刻的函數(shù)

  async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
   // ...
   const { rate, load, itemHeight, scrolledCb, scrollingCb } = getOptions(binding);
    // ...
    let isScrolling = ref<boolean>(false); // 記錄是否觸發(fā)滾動
    let isNotFirst = false; // 第一次滾動不觸發(fā)
    let timer: NodeJS.Timeout | null = null;
    // 監(jiān)聽是否滾動，如果監(jiān)聽值改變，立即觸發(fā)滾動時刻的回調函數(shù)
    watch(isScrolling, () => {
      scrollingCb(isScrolling.value);
    });
    const onScroll = async () => {
      if (isNotFirst) isScrolling.value = true;
      isNotFirst = true;
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
        isScrolling.value = false;
      }, 200);
      // ...
    };
   // ...
  },

滑動滾輪，此時立即觸發(fā)滾動的回調函數(shù)，觸發(fā) scrollingCb，并開啟一個定時器，如果在 200ms 內沒有再次滾動就斷定為停止?jié)L動，再次觸發(fā) scrollingCb、
如果在滾動開始的 200ms 內再次滑動滾輪，清空定時器，重新計時

調用：

<script lang="ts" setup>
const scrollingCb = (isScrolling: boolean) => {
  console.log(isScrolling);
};
</script>
<template>
  <ul v-infinite-scroll="{ load, itemHeight: 60, scrollingCb }">
    <li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
  </ul>
</template>

4. 完整代碼

還可以設置 隱藏滾動條，讓無限滾動的過程變得更加自然，只需要在使用 無限滾動指令 的元素上添加 element::-webkit-scrollbar { display: none; }

const __SCOPE__ = 'scope';
// 為 el 單獨指定類型
type InfiniteScrollEl = HTMLElement & {
  // 給 el 添加一個存儲變量的空間
  [__SCOPE__]: {
    onScroll: () => void;
  };
};
interface DirectiveOpt {
  itemHeight: number; /// 內部每一列數(shù)據(jù)的高度
  rate: number; // 每次更新刷新數(shù)據(jù)的頻率
  load: (dir: 'down' | 'up') => void; // 維護數(shù)據(jù)源的函數(shù)
  scrolledCb: (offset: number) => void; // 獲取偏移值
  scrollingCb: (isScrolling: boolean) => void; // 獲取改變滾動狀態(tài)的時刻
}
// 獲取并初始化配置選項
const getOptions = (binding: DirectiveBinding<DirectiveOpt>) => {
  const itemHeight = binding.value.itemHeight || 60;
  const rate = binding.value.rate || 1;
  const load = binding.value.load || (() => {});
  const scrolledCb = binding.value.scrolledCb || (() => {});
  const scrollingCb = binding.value.scrollingCb || (() => {});
  return { itemHeight, rate, load, scrolledCb, scrollingCb };
};
app.directive('infinite-scroll', {
  async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
    await nextTick();
    const { rate, load, itemHeight, scrolledCb, scrollingCb } = getOptions(binding);
    el.scrollTop = itemHeight;
    let topAddedPx = 0;
    let offset = 0;
    let isScrolling = ref<boolean>(false);
    let isNotFirst = false;
    let timer: NodeJS.Timeout | null = null;
    watch(isScrolling, () => {
      scrollingCb(isScrolling.value);
    });
    const onScroll = async () => {
      if (isNotFirst) isScrolling.value = true;
      isNotFirst = true;
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
        isScrolling.value = false;
      }, 200);
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
        for (let i = 0; i < rate; i++) {
          load('down');
          offset = el.scrollTop - itemHeight - topAddedPx;
        }
        await nextTick(); // 等待新增的元素加載完畢
      }
      if (el.scrollTop <= 10) {
        for (let i = 0; i < rate; i++) {
          load('up');
          topAddedPx += itemHeight;
        }
        await nextTick(); // 等待新增的元素加載完畢
        el.scrollTop = rate * itemHeight;
      }
      offset = el.scrollTop - itemHeight - topAddedPx;
      scrolledCb(offset);
    };
    el[__SCOPE__] = {
      onScroll,
    };
    el.addEventListener('scroll', onScroll);
  },
  unmounted(el) {
    const { onScroll } = el[__SCOPE__];
    el.removeEventListener('scroll', onScroll);
  },
});

以上就是簡單方法實現(xiàn)Vue 無限滾動組件示例的詳細內容，更多關于Vue 無限滾動組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

淺談vuex actions和mutation的異曲同工
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工，詳細的介紹了actions和mutation的使用和區(qū)別，非常具有實用價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
用vue和node寫的簡易購物車實現(xiàn)
這篇文章主要介紹了用vue和node寫的簡易購物車實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
elementui的table根據(jù)是否符合需求合并列的實現(xiàn)代碼
這篇文章主要介紹了elementui的table根據(jù)是否符合需求合并列的實現(xiàn)代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
Vue實現(xiàn)自定義組件改變組件背景色(示例代碼)
要實現(xiàn) Vue 自定義組件改變組件背景色,你可以通過 props 將背景色作為組件的一個屬性傳遞給組件,在組件內部監(jiān)聽這個屬性的變化,并將其應用到組件的樣式中,下面通過示例代碼介紹Vue如何實現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧
2024-03-03
vue自定義正在加載動畫的例子
今天小編就為大家分享一篇vue自定義正在加載動畫的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue的輪播圖組件實現(xiàn)方法
下面小編就為大家分享一篇Vue的輪播圖組件實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue基礎學習之項目整合及優(yōu)化
這篇文章主要給大家介紹了關于Vue基礎學習之項目整合及優(yōu)化的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-06-06
Vue3中集成高德地圖并實現(xiàn)平移縮放功能
隨著前端技術的不斷發(fā)展,地圖應用在我們的項目中越來越常見,本文將介紹如何在Vue3項目中集成高德地圖,并通過簡單的配置實現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下
2024-09-09
ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決
本文主要介紹了ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-08-08
vue-cli配置flexible過程詳解
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07