使用vue-infinite-scroll實現(xiàn)無限滾動效果
更新時間：2018年06月22日 13:40:24 作者：simoonQian
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。這篇文章主要介紹了用vue-infinite-scroll實現(xiàn)無限滾動效果,需要的朋友可以參考下
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。
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是方法，里面是要執(zhí)行的代碼
2.busy的值是true的時候，就不再加載，如果是false就執(zhí)行加載
3.10表示距離底部為10 的時候就執(zhí)行l(wèi)oadMore方法
loadMore () {
this.busy = true
//把busy置位true，這次請求結(jié)束前不再執(zhí)行
setTimeout(() => {
this.page++
this.getGoodLists(true)
//調(diào)用獲取數(shù)據(jù)接口，并且傳入一個true，讓axios方法指導是否需要拼接數(shù)組。
}, 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，則拼接數(shù)組。
if (res.result.count === 0) {
this.busy = true
} else {
this.busy = false
}
} else {
this.goodList = res.result.list
this.busy = false
第一次進來的時候，把busy置位false。執(zhí)行l(wèi)oadMore的方法
}
})
},
總結(jié)
以上所述是小編給大家介紹的使用vue-infinite-scroll實現(xiàn)無限滾動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
錯誤處理是框架設(shè)計的核心要素之一,框架的錯誤處理好壞,直接決定用戶應(yīng)用程序的健壯性以及用戶開發(fā)應(yīng)用時處理錯誤的心智負擔,本文將從源碼入手,剖析一下Vue3中是如何進行錯誤處理的,需要的可以參考下2024-01-01
這篇文章主要介紹了Vue2 輪播圖slide組件實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進視圖層開發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vuecli3.x中輕松4步帶你使用tinymce的步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家介紹了Vite的createServer啟動源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
在vue中獲取wangeditor的html和text的操作
這篇文章主要介紹了在vue中獲取wangeditor的html和text的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了uniapp引入模塊化js文件和非模塊化js文件的四種方式，本文結(jié)合實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
本文主要介紹了vue3如何避免樣式污染的方法示例,使用scoped可以避免父組件的樣式滲透到子組件中,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-09-09
今天小編就為大家分享一篇Vue-router 切換組件頁面時進入進出動畫方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09