vue3使用addEventListener添加滚动触底加载,执行多次问题

const handleScroll = (e) => {
    let el = e.target
   
  
    if (Number(el.scrollTop + el.clientHeight).toFixed(0) == el.scrollHeight) {
        console.log(currentPage.value, "yema");
        currentPage.value++

        fetchDatas()
    }

上面代码执行多次

解决方案
确保只绑定一次滚动事件处理程序。如果你使用了类似 addEventListener 的方法来绑定事件处理程序,那么在绑定之前最好先解绑旧的事件处理程序。

另外,还可以考虑在绑定事件处理程序时使用 { once: true } 选项,以确保事件只会触发一次。示例代码如下:

// 假设 el 是你要监听滚动事件的 DOM 元素
el.addEventListener('scroll', handleScroll, { once: true });

通过在绑定滚动事件时添加 { once: true } 选项,可以确保滚动事件只会触发一次,从而避免多次触发 handleScroll() 函数。

  • 10
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`ag-Grid-Vue` 是一个基于 Vue.js 的 `ag-Grid` 的封装组件,它是 `ag-Grid`(一个功能强大的数据表格和网格组件库)在 Vue 框架中的实现。滚动触底加载更多(Infinite Scroll or Virtual Scrolling)是 ag-Grid 提供的一种功能,用于在用户滚动到表格底部时自动加载更多行,而不是一次性加载所有数据,从而提高性能和用户体验。 在 ag-Grid-Vue 中实现滚动触底加载更多的步骤通常包括: 1. 配置列:在 ag-Grid 的列定义中启用 `infiniteScroll` 属性,并设置 `scrollThreshold` 参数,指定当滚动到底部多少距离时触发加载。例如: ```html <ag-grid-vue :columnDefs="columnDefs" :infiniteScroll="true" scrollThreshold="100"></ag-grid-vue> ``` 这里 `100` 表示当滚动条距离底部小于100px时开始加载更多数据。 2. 数据分页:你需要确保数据源是分页的,可以使用 ag-Grid 的 `gridApi.getRowNode` 方法获取当前可视区域的行号范围,然后从后向前逐页加载。 3. 加载事件处理:在 Vue 组件中监听 `onGridReady` 或其他适当的事件,当滚动到底部时触发加载更多数据的请求,并更新数据源。示例: ```javascript mounted() { this.gridApi.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(params) { if (params.isEnd && params.isLastRenderedPage) { // 加载更多数据 this.loadMoreData(); } }, loadMoreData() { // 假设你有一个接口 `loadNextPage` 用于请求更多数据 this.loadNextPage().then(() => { // 更新行数,告诉 ag-Grid 加载完成 this.gridApi.sizeColumnsToFit(); }); } } ``` 4. 更新视图:加载新数据后,你需要将其添加到现有数据的末尾,并调用 `gridApi.sizeColumnsToFit()` 来调整列宽以适应新的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值