vue table 监听右滚动条触底事件,无法通过window的addEventListener监听滚动条触底

该代码段展示了如何在Vue的组件中使用自定义指令`loadmore`来监听表格滚动事件。当表格内容接近底部时,它会触发一个函数,模拟无限滚动加载更多的数据。`bottomingOutFlage`用于防止频繁调用,确保数据加载的用户体验。
摘要由CSDN通过智能技术生成

下方监听事件写在 methods 方法的同级下面

// 监听表格滚动

  directives: {

    loadmore: {

      bind(el, binding) {

        let bottomingOutFlage = true;

        const selectWrap = el.querySelector(".el-table__body-wrapper");

        selectWrap.addEventListener("scroll", function () {

          const scrollDistance =

            this.scrollHeight - this.scrollTop - this.clientHeight;

          if (bottomingOutFlage) {

            if (scrollDistance <= 0.5) {

              bottomingOutFlage = false;

              setTimeout(() => {

                bottomingOutFlage = true;

              }, 100)

              binding.value()//执行在使用时绑定的函数,在这里即loadMorePerson方法

            }

          }

        });

      },

    },

  },

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值