溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue-infinite-scroll插件可以無限滾動實現加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發某個方法。
https://github.com/ElemeFE/vue-infinite-scroll/
https://www.npmjs.com/package/vue-infinite-scroll
npm i vue-infinite-scroll --save
main.js使用
import vueiInfinite from 'vue-infinite-scroll' Vue.use(vueiInfinite) <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> <div class="loading">加載中...</div> </div>
1.loadMore是方法，里面是要執行的代碼
2.busy的值是true的時候，就不再加載，如果是false就執行加載
3.10表示距離底部為10 的時候就執行loadMore方法
loadMore () {
this.busy = true
//把busy置位true，這次請求結束前不再執行
setTimeout(() => {
this.page++
this.getGoodLists(true)
//調用獲取數據接口，并且傳入一個true，讓axios方法指導是否需要拼接數組。
}, 500)
}
getGoodLists (flag) {
var param = {
page: this.page,
pageSize: this.pageSize,
sort: this.sortFlag ? 1 : -1
}
axios.get('/goods', {params: param}).then((response) => {
let res = response.data
if (flag) {
this.goodList = this.goodList.concat(res.result.list)
//如果是flagtrue，則拼接數組。
if (res.result.count === 0) {
this.busy = true
} else {
this.busy = false
}
} else {
this.goodList = res.result.list
this.busy = false
第一次進來的時候，把busy置位false。執行loadMore的方法
}
})
},
總結
以上所述是小編給大家介紹的使用vue-infinite-scroll實現無限滾動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
