Vue betterscroll 是 Vue.js 框架中非常流行的滾動插件，它提供了許多有用的功能，比如下拉刷新和上拉加載更多。在本文中，我們將介紹 Vue betterscroll 中的上拉加載更多功能，以及如何使用它來實現一個無限滾動的列表。

// 安裝
npm install vue-better-scroll
// 導入
import BScroll from 'better-scroll'
export default {
mounted() {
this.$nextTick(() =>{
this.initScroll()
})
},
methods: {
initScroll() {
this.scroll = new BScroll(this.$refs.wrapper, {
pullUpLoad: true,
click: true
})
this.scroll.on('pullingUp', () =>{
// 加載更多數據
this.loadMore()
})
}
}
}

為了實現上拉加載更多功能，我們首先需要安裝并導入 Vue betterscroll 插件。在 mounted 鉤子函數中，我們初始化滾動實例，并啟用 pullUpLoad 選項。接著，在 scrolling 實例中監聽 pullingUp 事件，當滾動條觸底時觸發。

// 數據
data() {
return {
list: [],
currentPage: 1,
pageSize: 10
}
}
// 加載更多
async loadMore() {
try {
const data = await axios.get(`/api/list?page=${this.currentPage}&pageSize=${this.pageSize}`)
if (data.length< this.pageSize) {
this.scroll.finishPullUp()
this.scroll.disablePullUp()
}
this.list = this.list.concat(data)
this.currentPage++
} catch (e) {
console.error(e)
}
}

我們還需要在數據中定義一個列表和當前頁碼以及每頁條數。在 loadMore 方法中，我們通過 axios 發送請求獲取更多數據。如果返回的數據長度小于每頁條數，表示已經沒有更多數據了，我們需要調用 finishPullUp 方法來停止上拉加載更多功能，并禁用 pullUpLoad 選項。接著，在列表數據中追加新數據，并更新當前頁碼。

最后，在模板中使用 v-for 指令和 v-text 指令來渲染列表數據。

通過以上步驟，我們就可以實現一個無限滾動的列表，用戶可以通過滾動條觸底來加載更多數據。Vue betterscroll 中的上拉加載更多功能非常方便，僅需要幾行代碼即可實現列表數據的增量加載。