簡單方法實現(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. 整體思路
- 首先，外部的盒子會 隱藏 內(nèi)部的盒子 溢出的部分
- 內(nèi)部盒子的視圖展示由數(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可以訪問調(diào)用指令時傳遞的參數(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; /// 內(nèi)部每一列數(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ù)，同時將這個回調(diào)函數(shù)掛載在 el 上，組件被銷毀的時候，刪除滾動事件
調(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>
此時會帶來諸多 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 的高度
調(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 獲取開始滾動和結束滾動的鉤子函數(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ā)滾動時刻的回調(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);
// ...
};
// ...
},
- 滑動滾輪，此時立即觸發(fā)滾動的回調(diào)函數(shù)，觸發(fā)
scrollingCb，并開啟一個定時器，如果在200ms內(nèi)沒有再次滾動就斷定為停止?jié)L動，再次觸發(fā)scrollingCb、 - 如果在滾動開始的
200ms內(nèi)再次滑動滾輪，清空定時器，重新計時
調(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. 完整代碼
還可以設置 隱藏滾動條，讓無限滾動的過程變得更加自然，只需要在使用 無限滾動指令 的元素上添加 element::-webkit-scrollbar { display: none; }
const __SCOPE__ = 'scope';
// 為 el 單獨指定類型
type InfiniteScrollEl = HTMLElement & {
// 給 el 添加一個存儲變量的空間
[__SCOPE__]: {
onScroll: () => void;
};
};
interface DirectiveOpt {
itemHeight: number; /// 內(nèi)部每一列數(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 無限滾動組件示例的詳細內(nèi)容，更多關于Vue 無限滾動組件的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了QT和vue交互的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關于VUE3?Vite打包后動態(tài)圖片資源不顯示問題的解決方法,可能是因為在部署后的服務器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue解決跨域問題常見方法,結合實例形式詳細分析了vue出現(xiàn)跨域問題的原因,以及常見解決方案與相關注意事項,需要的朋友可以參考下2023-06-06
Vue3中使用styled-components的實現(xiàn)
本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-05-05
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問題的解決過程,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細介紹了Vue3中邏輯復用的相關知識,文中的示例代碼簡潔易懂,對我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下2023-12-12
vue關于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中get請求如何傳遞數(shù)組參數(shù)的方法示例
這篇文章主要介紹了vue中get請求如何傳遞數(shù)組參數(shù)的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
將bmob js-sdk放在static目錄，然后在index.html頁面中已 script 標簽的形式引入，就可以在vue中全局使用bmob js-sdk。下面通過本文給大家分享bmob js-sdk 在vue中的使用教程，需要的朋友參考下吧2018-01-01