使用vue-infinite-scroll實現(xiàn)無限滾動效果
更新時間：2018年06月22日 13:40:24 作者：simoonQian
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當(dāng)滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。這篇文章主要介紹了用vue-infinite-scroll實現(xiàn)無限滾動效果,需要的朋友可以參考下
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當(dāng)滾動條滾動到距離底部的指定高度時觸發(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方法指導(dǎo)是否需要拼接數(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)無限滾動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識，本文通過實例代碼給大家介紹了vue router的使用，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了keep-alive組件的作用與原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue filter 過濾器、以及在table中的使用介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了詳解vue移動端項目的適配(以mint-ui為例)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關(guān)于Vue中實現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中使用$http.post請求傳參的錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03