溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中實(shí)現(xiàn)滾動(dòng)加載

發(fā)布時(shí)間:2020-06-16 08:55:13 來源:網(wǎng)絡(luò) 閱讀:3101 作者:歆冉 欄目:web開發(fā)

vue中實(shí)現(xiàn)滾動(dòng)加載

需要安裝該插件:

cnpm i vue-infinite-scroll -S   // 生產(chǎn)依賴 --save 等價(jià)

在main.js文件進(jìn)行引入進(jìn)來

vue中實(shí)現(xiàn)滾動(dòng)加載

data中設(shè)置
busy:false
<!-- 滾動(dòng)加載 -->
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div class="load">滾動(dòng)加載更多</div>
</div>

loadMore(){
    this.busy=true;
    // 延遲1s去請求數(shù)據(jù)
    setTimeout(()=>{
    // 應(yīng)該是請求后臺提供的接口數(shù)據(jù)
    this.busy = true;
    for(let i=0;i<5;i++){
    this.dataLst.push({
    title:"h好好學(xué)習(xí) 天天向上啊"+i
    });
    }
    this.busy = false;
    },1000);
},

vue中實(shí)現(xiàn)滾動(dòng)加載

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI