首页
   /       /   
Vue分页之Element UI触底加载
12月
22
Vue分页之Element UI触底加载
作者:大彭Sir    分类: 随手笔记

实现后的效果

el-scrollbar触底加载数据

先绑定ref
代码如下:

<el-scrollbar ref="scrollbar" v-loading="fullscreenLoading">
         <!--对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。-->
</el-scrollbar>

在mounted生命周期渲染方法

  mounted() {
    this.scrollbar(); //el-scrollbar触底事件
  },

最后写一个方法

    scrollbar() {
      this.$refs.scrollbar.handleScroll = () => {
        var wrap = this.$refs.scrollbar.wrap;
        this.$refs.scrollbar.moveY = (wrap.scrollTop * 100) / wrap.clientHeight;
        this.$refs.scrollbar.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth;
        let poor = wrap.scrollHeight - wrap.clientHeight;
        if (
          poor == parseInt(wrap.scrollTop) ||
          poor == Math.ceil(wrap.scrollTop) ||
          poor == Math.floor(wrap.scrollTop)
        ) {
           console.log("已经触底了");
        }
      };
    },
本文标签:标签: VUE 分页 加载 触底加载
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录