這篇文章給大家分享的是有關Vue如何實現一個無限加載列表功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
一個需要判斷的地方就是加載中再次觸發滾動的時候，不要獲取數據。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表無限加載</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 :>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) { // 模擬后臺獲取數據
console.log('獲取數據 傳入: ', { from, size });
let data = [];
let total = 98;
size = Math.min(size, total - from + 1);
for (let i = 0; i < size; i++) {
data.push(`列表項${from + i}`);
}
let ret = { data, total };
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('獲取數據 返回: ', ret);
resolve(ret);
}, 500);
})
}
new Vue({
el: '#unlimitedList',
data: {
list: [],
loading: true, // 數據加載中
allLoaded: false // 數據已經全部加載
},
methods: {
getData() {
this.loading = true; // 顯示加載中的標識
fetch(this.list.length + 1).then(res => {
this.list.splice(this.list.length, 0, ...res.data); // 將新獲取到的數據連接到 this.list (vue 能檢測到 splice() 函數
this.loading = false; // 加載結束 取消加載中顯示
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; // 滾動條在Y軸上的滾動距離
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) { // 滾動到底部
this.getData(); // 如果已經滾到底了 獲取數據
}
}
},
created() {
this.getData();
window.addEventListener('scroll', this.onScroll);
},
destroyed () {
window.removeEventListener('scroll', this.onScroll);
}
})
</script>
</body>
</html>感謝各位的閱讀！關于“Vue如何實現一個無限加載列表功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
