VUE底部滚动刷新 vue-mugen-scroll

1.下载依赖包

$ npm install --save vue-mugen-scroll

2.哪个页面需要到，就在哪个页面引用

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;
                // 此处写你请求数据的代码
                //this.loading = false
                for(var i=0;i<15;i++){
                    this.tableData.push({
                      .........
                    })
                }
                this.loading = false;
            },
}
.........
</script>
//注意<div class="div-table" ref="noCharge">该div的高度一定预先设置好