uni-app nvue页面在waterfall组件中使用refresh功能后多次下拉会导致waterfall的@loadmore事件失效

uni-app nvue页面在waterfall组件中使用refresh功能后多次下拉会导致waterfall的@loadmore事件失效

开发环境 版本号 项目创建方式
Mac 11.4 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.4

HBuilderX类型：正式

HBuilderX版本号：3.3.2

手机系统：全部

手机厂商：华为

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

测试过的手机：华为、小米、iphoneX

示例代码：

<template>  
    <waterfall @scroll="onListScroll" :loadmoreoffset="200" [@loadmore](/user/loadmore)="loadMore()" :column-gap="8" :left-gap="15" :right-gap="13" :show-scrollbar="false" column-count="2">  
        <refresh @pullingdown="onpullingdown" @refresh="reload()" :display="refreshing?'show':'hide'">   
            <text class="refresh_text">{{refresh}}</text>  
        </refresh>  
    </waterfall>  
</template>

操作步骤：

多次（5-10次）下拉后，滚动到底部将不触发loadmore事件

预期结果：

多次下拉后，滚动到底部可以正常触发loadmore事件

实际结果：

多次下拉后，滚动到底部将不触发loadmore事件

bug描述：

更多关于uni-app nvue页面在waterfall组件中使用refresh功能后多次下拉会导致waterfall的@loadmore事件失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

我试试 能否复现

更多关于uni-app nvue页面在waterfall组件中使用refresh功能后多次下拉会导致waterfall的@loadmore事件失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


能否提供一个完整的可复现问题的代码

目前已通过在底部创建一个元素的@appear来执行加载更多来解决问题，后续提供可复现代码

这是一个已知的nvue waterfall组件与refresh组件配合使用的bug。问题核心在于多次下拉刷新后，waterfall组件的内部状态管理异常，导致@loadmore事件监听失效。

根本原因： waterfall组件在多次触发refresh后，其内部用于计算滚动位置和触发加载更多的机制会出现紊乱。refresh组件的显示/隐藏状态变化可能干扰了waterfall的滚动事件监听。

临时解决方案：

  1. 避免使用内置refresh组件，改用自定义下拉刷新：
<waterfall ref="waterfall" @scroll="onScroll">
  <!-- 自定义刷新头部 -->
  <view v-if="isRefreshing" class="refresh-header">
    <text>刷新中...</text>
  </view>
  <!-- 列表内容 -->
</waterfall>
  1. 重置waterfall状态： 在每次refresh完成后，尝试重置waterfall：
reload() {
  this.refreshing = true
  // 刷新数据...
  this.$nextTick(() => {
    this.refreshing = false
    // 强制重置waterfall
    this.$refs.waterfall && this.$refs.waterfall.resetLoadmore()
  })
}
回到顶部