VUE底部滾動(dòng)刷新 vue-mugen-scroll

1.下載依賴包

$ npm install --save vue-mugen-scroll

2.哪個(gè)頁(yè)面需要到,就在哪個(gè)頁(yè)面引用

import MugenScroll from 'vue-mugen-scroll';

3.代碼如下

<template>
      <div class="div-table" ref="noCharge">
            <div class="table-loading">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    ..........
                    <el-table-column
                      align="center"
                      label="金額">
                        <template slot-scope="scope">
                            {{scope.row.money | moneyFil}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <mugen-scroll :handler="fetchData" :should-handle="!loading" scroll-container="noCharge">
                <!--  <loading :hasLoading="hasLoading"></loading> -->
                loading 
            </mugen-scroll>
        </div>
</template>

<script>
.......
  data(){ return{  loading:false, } },
  methods:{
         fetchData() {
                console.log(1212)
                this.loading = true;
                // 此處寫(xiě)你請(qǐng)求數(shù)據(jù)的代碼
                //this.loading = false
                for(var i=0;i<15;i++){
                    this.tableData.push({
                      .........
                    })
                }
                this.loading = false;
            },
}
.........
</script>
//注意<div class="div-table" ref="noCharge">該div的高度一定預(yù)先設(shè)置好
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,070評(píng)論 25 709
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,569評(píng)論 19 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類相關(guān)的語(yǔ)法,內(nèi)部類的語(yǔ)法,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法,線程的語(yǔ)...
    子非魚(yú)_t_閱讀 34,728評(píng)論 18 399
  • 喜歡云,喜歡樹(shù),喜歡自然,喜歡純粹。這個(gè)世界一半黑暗,一半美好,我愛(ài)樹(shù)的不羨繁華,默然獨(dú)立。 有詩(shī)“如果有來(lái)生,要...
    流水為墨啊閱讀 637評(píng)論 2 8
  • 簡(jiǎn)單做一個(gè)播放音樂(lè)的小demo: 搭建界面,放三個(gè)按鈕,播放、暫停、停止 播放音效,因?yàn)槲募?,所以不需要進(jìn)行什么...
    ali_vera閱讀 317評(píng)論 0 0

友情鏈接更多精彩內(nèi)容