簡(jiǎn)單方法實(shí)現(xiàn)Vue?無(wú)限滾動(dòng)組件示例

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

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

1. 前言

對(duì)于列表類型的大量數(shù)據(jù)，前端展示往往采用 分頁(yè) 和 無(wú)限滾動(dòng) 的方式來(lái)展示，對(duì)于用戶來(lái)說(shuō)，鼠標(biāo)滾輪和觸控屏使?jié)L動(dòng)行為要比點(diǎn)擊更快更容易。 element-plus 組件庫(kù)提供了簡(jiǎn)單的 vue 指令，就可以輕易的實(shí)現(xiàn)

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

2. 整體思路

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

scrollTop：滾動(dòng)條滾動(dòng)距離
scrollHeight：滾動(dòng)條的實(shí)際高度
clientHeight：元素的高度

隨著滾動(dòng)條滾到底部，此時(shí) scrollTop + clientHeight = scrollHeight，那么此時(shí)就可以判斷到達(dá)底部了

開始

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

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

自定義指令 相對(duì)于 組件 來(lái)說(shuō)能夠更好地操作dom元素

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

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

那么我們整體結(jié)構(gòu)和整體思路就有了，就不難寫出如下代碼：

// 為 el 單獨(dú)指定類型
type InfiniteScrollEl = HTMLElement & {
  // 給 el 添加一個(gè)存儲(chǔ)變量的空間
  [__SCOPE__]: {
    onScroll: () => void;
  };
};
interface DirectiveOpt {
  itemHeight: number; /// 內(nèi)部每一列數(shù)據(jù)的高度
  rate: number; // 每次更新刷新數(shù)據(jù)的頻率
  load: (dir: 'down' | 'up') => void; // 維護(hù)數(shù)據(jù)源的函數(shù)
}
// 獲取并初始化配置選項(xiàng)
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);
  },
});

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

調(diào)用：

<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>

此時(shí)會(huì)帶來(lái)諸多 bug：

第一向下滾動(dòng)的時(shí)候：此時(shí)的 scrollTop === 0，會(huì)觸發(fā)向上刷新
當(dāng)滾動(dòng)條位于頂部的時(shí)候無(wú)法向上刷新，因?yàn)檫@個(gè)時(shí)候 scrollTop === 0，向上滾動(dòng)滾輪無(wú)法觸發(fā)滾動(dòng)事件

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

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

async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
    // ...
    const { rate, load, itemHeight } = getOptions(binding);
    el.scrollTop = itemHeight; // 組件加載完畢，讓列表視口頂部為第二項(xiàng)數(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;
      }
    };
    // ...
  },

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

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

3. 鉤子函數(shù)

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

很多小伙伴可能會(huì)問了？這個(gè)值不就是 scrollTop？真的是這樣的嗎

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

我們得從 getOptions 中多添加一個(gè)處理 獲取偏移值的函數(shù)，這個(gè)函數(shù)在每次 onScroll 執(zhí)行完畢的時(shí)候觸發(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);
    };
    // ...
  },

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

在 onScroll 結(jié)束的時(shí)候 offset 等于 此時(shí)的位置 減去 向上刷新時(shí)候新增的高度，但是別忘了還要減去 itemHeight，因?yàn)樵诮M件初始化的時(shí)候，我們預(yù)留了一個(gè) itemHeight 的高度

調(diào)用：

<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 獲取開始滾動(dòng)和結(jié)束滾動(dòng)的鉤子函數(shù)

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

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

  async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
   // ...
   const { rate, load, itemHeight, scrolledCb, scrollingCb } = getOptions(binding);
    // ...
    let isScrolling = ref<boolean>(false); // 記錄是否觸發(fā)滾動(dòng)
    let isNotFirst = false; // 第一次滾動(dòng)不觸發(fā)
    let timer: NodeJS.Timeout | null = null;
    // 監(jiān)聽是否滾動(dòng)，如果監(jiān)聽值改變，立即觸發(fā)滾動(dòng)時(shí)刻的回調(diào)函數(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);
      // ...
    };
   // ...
  },

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

調(diào)用：

<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. 完整代碼

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

const __SCOPE__ = 'scope';
// 為 el 單獨(dú)指定類型
type InfiniteScrollEl = HTMLElement & {
  // 給 el 添加一個(gè)存儲(chǔ)變量的空間
  [__SCOPE__]: {
    onScroll: () => void;
  };
};
interface DirectiveOpt {
  itemHeight: number; /// 內(nèi)部每一列數(shù)據(jù)的高度
  rate: number; // 每次更新刷新數(shù)據(jù)的頻率
  load: (dir: 'down' | 'up') => void; // 維護(hù)數(shù)據(jù)源的函數(shù)
  scrolledCb: (offset: number) => void; // 獲取偏移值
  scrollingCb: (isScrolling: boolean) => void; // 獲取改變滾動(dòng)狀態(tài)的時(shí)刻
}
// 獲取并初始化配置選項(xiàng)
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);
  },
});

以上就是簡(jiǎn)單方法實(shí)現(xiàn)Vue 無(wú)限滾動(dòng)組件示例的詳細(xì)內(nèi)容，更多關(guān)于Vue 無(wú)限滾動(dòng)組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: