Vue實(shí)現(xiàn)一個(gè)無(wú)限加載列表功能
更新時(shí)間：2018年11月13日 08:48:06 作者：wenr
這篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)無(wú)限加載列表功能,需要的朋友可以參考下
一個(gè)需要判斷的地方就是加載中再次觸發(fā)滾動(dòng)的時(shí)候，不要獲取數(shù)據(jù)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表無(wú)限加載</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
height: 50px;
border-bottom: 1px solid #c7c7c7;
list-style: none;
line-height: 50px;
padding-left: 30px;
}
</style>
</head>
<body>
<div id="unlimitedList">
<ul>
<li v-for="item in list">{{ item }}</li>
<li :style="{display: loading ? 'initial' : 'none'}">Loading......</div>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
function fetch(from, size = 20) { // 模擬后臺(tái)獲取數(shù)據(jù)
console.log('獲取數(shù)據(jù) 傳入: ', { from, size });
let data = [];
let total = 98;
size = Math.min(size, total - from + 1);
for (let i = 0; i < size; i++) {
data.push(`列表項(xiàng)${from + i}`);
}
let ret = { data, total };
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('獲取數(shù)據(jù) 返回: ', ret);
resolve(ret);
}, 500);
})
}
new Vue({
el: '#unlimitedList',
data: {
list: [],
loading: true, // 數(shù)據(jù)加載中
allLoaded: false // 數(shù)據(jù)已經(jīng)全部加載
},
methods: {
getData() {
this.loading = true; // 顯示加載中的標(biāo)識(shí)
fetch(this.list.length + 1).then(res => {
this.list.splice(this.list.length, 0, ...res.data); // 將新獲取到的數(shù)據(jù)連接到 this.list (vue 能檢測(cè)到 splice() 函數(shù)
this.loading = false; // 加載結(jié)束 取消加載中顯示
if (this.list.length === res.total) {
this.allLoaded = true;
}
})
},
onScroll(e) {
if (this.loading || this.allLoaded) return;
let top = document.documentElement.scrollTop || document.body.scrollTop; // 滾動(dòng)條在Y軸上的滾動(dòng)距離
let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 瀏覽器視口的高度
let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文檔的總高度
if (top + vh >= height) { // 滾動(dòng)到底部
this.getData(); // 如果已經(jīng)滾到底了 獲取數(shù)據(jù)
}
}
},
created() {
this.getData();
window.addEventListener('scroll', this.onScroll);
},
destroyed () {
window.removeEventListener('scroll', this.onScroll);
}
})
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)一個(gè)無(wú)限加載列表功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯(cuò)位問(wèn)題
這篇文章主要介紹了如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯(cuò)位問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁(yè)面應(yīng)用（SPA）時(shí)的常用組合,通過(guò)嵌套路由,可以實(shí)現(xiàn)多級(jí)頁(yè)面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場(chǎng)景的詳細(xì)介紹,需要的朋友可以參考下2025-01-01
vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue的一個(gè)強(qiáng)大功能就是組件化開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細(xì)的代碼及圖文介紹,需要的朋友可以參考下2024-04-04
Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
文章介紹了如何在Vue中設(shè)置頁(yè)面全屏,包括下載插件、全屏、退出全屏、全屏切換等操作,同時(shí),還分享了在若依框架中實(shí)現(xiàn)主頁(yè)面內(nèi)容全屏的方法,包括配置全局變量和在布局文件中進(jìn)行設(shè)置2025-02-02
vue動(dòng)態(tài)添加背景圖簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加背景圖的相關(guān)資料,在一些場(chǎng)景下我們需要使用戶可以進(jìn)行自定義背景圖片,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue3 setup中defineEmits與defineProps的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類(lèi)型的數(shù)據(jù),使用defineEmits會(huì)返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧2023-10-10
詳解Vue 如何監(jiān)聽(tīng)Array的變化
這篇文章主要介紹了詳解Vue 如何監(jiān)聽(tīng)Array的變化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
這篇文章主要介紹了vue 使用post/get 下載導(dǎo)出文件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08