使用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果
vue-infinite-scroll插件可以無(wú)限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。
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的時(shí)候，就不再加載，如果是false就執(zhí)行加載
3.10表示距離底部為10 的時(shí)候就執(zhí)行l(wèi)oadMore方法
loadMore () {
this.busy = true
//把busy置位true，這次請(qǐng)求結(jié)束前不再執(zhí)行
setTimeout(() => {
this.page++
this.getGoodLists(true)
//調(diào)用獲取數(shù)據(jù)接口，并且傳入一個(gè)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
第一次進(jìn)來(lái)的時(shí)候，把busy置位false。執(zhí)行l(wèi)oadMore的方法
}
})
},
總結(jié)
以上所述是小編給大家介紹的使用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了keep-alive組件的作用與原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue filter 過(guò)濾器、以及在table中的使用介紹
這篇文章主要介紹了Vue filter 過(guò)濾器、以及在table中的使用介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)
這篇文章主要介紹了詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題
今天小編就為大家分享一篇vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vue.js中組件中的slot實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
Vue兩個(gè)通信方式與動(dòng)畫過(guò)度及混入使用介紹
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決
這篇文章主要介紹了vue中使用$http.post請(qǐng)求傳參的錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue中process.env的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03