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的高度一定预先设置好
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,002评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,805评论 18 399
  • 喜欢云,喜欢树,喜欢自然,喜欢纯粹。这个世界一半黑暗,一半美好,我爱树的不羡繁华,默然独立。 有诗“如果有来生,要...
    流水为墨啊阅读 564评论 2 8
  • 简单做一个播放音乐的小demo: 搭建界面,放三个按钮,播放、暂停、停止 播放音效,因为文件小,所以不需要进行什么...
    ali_vera阅读 299评论 0 0