當(dāng)今互聯(lián)網(wǎng)時代，隨著網(wǎng)頁、App和小程序等的普及，在網(wǎng)頁和移動端開發(fā)中，無限滾動下拉（Infinite Scroll）這一功能也日漸流行。它是指在用戶向下滾動界面時，當(dāng)?shù)竭_頁面底部時自動加載更多內(nèi)容，所以用戶不需要點擊翻頁按鈕或刷新頁面來查看更多內(nèi)容。這種交互方式不僅方便用戶瀏覽，也提高了頁面的互動性和用戶留存率。

/*
* 簡單演示無限滾動下拉
*/
// HTML
{{ item.content }}
加載中...
// JS
new Vue({
el: '#app',
data: {
allData: [], // 頁面展示的全部數(shù)據(jù)
chunkSize: 10, // 每次請求返回的數(shù)據(jù)條數(shù)
pageNo: 1, // 當(dāng)前頁碼
isLoading: false // 請求是否正在進行中
},
methods: {
// 處理滾動事件
handleScroll() {
const scrollWrap = this.$refs.scrollWrap;
const scrollTop = scrollWrap.scrollTop; // 滾動條距離頂部的距離
const offsetHeight = scrollWrap.offsetHeight; // 滾動容器的高度
const scrollHeight = scrollWrap.scrollHeight; // 滾動內(nèi)容的高度
if (scrollTop + offsetHeight >= scrollHeight && !this.isLoading) {
this.loadData();
}
},
// 加載數(shù)據(jù)
loadData() {
this.isLoading = true;
api.getData(this.pageNo, this.chunkSize).then((res) =>{
if (res.code === 0) {
this.allData = this.allData.concat(res.data); // 加載新數(shù)據(jù)
this.pageNo++; // 當(dāng)前頁碼自增
}
}).finally(() =>{
this.isLoading = false; // 請求結(jié)束
});
}
},
mounted() {
this.loadData(); // 初始加載第一頁數(shù)據(jù)
}
});

在Vue中實現(xiàn)無限滾動下拉，首先需要對滾動容器進行監(jiān)聽。在上面的代碼中，我們使用了Vue提供的$refs特殊屬性，獲取到了滾動容器的引用scrollWrap，然后在它上面綁定了scroll事件，通過handleScroll方法處理滾動到底部時的邏輯。在handleScroll方法中，通過scrollTop、offsetHeight和scrollHeight獲取到滾動距離和容器尺寸等屬性，進行比較來判斷是否需要加載更多數(shù)據(jù)。

在loadData方法中，我們通過調(diào)用接口獲取新的數(shù)據(jù)，然后使用Vue的數(shù)據(jù)響應(yīng)機制concat方法將新的數(shù)據(jù)添加到allData數(shù)組中，同時頁碼自增。isLoading屬性用來表示當(dāng)前是否正在加載數(shù)據(jù)。值得注意的是，為了避免在請求返回前用戶不斷滑動滾動條導(dǎo)致重復(fù)請求的問題，我們在isLoading為真時不處理新的滾動事件。

由于Vue開發(fā)中的數(shù)據(jù)驅(qū)動，類似無限滾動的功能可以在數(shù)據(jù)響應(yīng)式機制和生命周期鉤子函數(shù)的搭配下，較為簡單地實現(xiàn)。除此之外，也可以使用第三方庫（如vue-infinite-loading），精簡開發(fā)工作量。