uni-app 使用 pullToRefresh 刷新功能时，嵌套页面苹果端在子list向下滚动过程中无法触发下拉刷新，安卓端正常

uni-app 使用 pullToRefresh 刷新功能时，嵌套页面苹果端在子list向下滚动过程中无法触发下拉刷新，安卓端正常

操作步骤：

  • 使用苹果手机运行我上传的代码例子，在子list不能触发下拉刷新，只能在父list才可以触发，安卓端正常。

预期结果：

  • 整个页面都能触发

实际结果：

  • 只有在父list才能触发

bug描述：

使用官方swiper-list插件搭建公司项目框架。 需要使用到下拉刷新功能 于是配置了pullToRefresh下拉刷新

"pages": [ /
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#FE8D4D",
"style": "circle"
}
},
"titleNView": {
"type": "transparent"
}
}
}
]
开发环境 版本号 项目创建方式
Mac macOS Big sur 11.2 HBuilderX
手机系统 版本号
iOS IOS 14
手机厂商 手机机型
苹果 iPhone 11 pro max
页面类型 nvue
打包方式 云端

更多关于uni-app 使用 pullToRefresh 刷新功能时，嵌套页面苹果端在子list向下滚动过程中无法触发下拉刷新，安卓端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

源代码

更多关于uni-app 使用 pullToRefresh 刷新功能时，嵌套页面苹果端在子list向下滚动过程中无法触发下拉刷新，安卓端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue+list的情况下，尽量不要用页面的下拉刷新，list与页面下拉本身有滚动冲突。建议使用list的下拉组件，参考示例https://ext.dcloud.net.cn/plugin?id=103

这是一个iOS平台下拉刷新与滚动容器嵌套的兼容性问题。在iOS系统中，当子列表（如scroll-view或list组件）处于滚动状态时，系统级的下拉刷新手势可能无法正确传递到父容器。

解决方案建议：

  1. 使用页面级滚动替代嵌套滚动 将页面结构改为单一滚动容器，避免多层滚动嵌套，这样下拉刷新手势能够被正确识别。

  2. 启用子列表bounces属性 在子list组件中添加：

    :bounces="true"

    这允许子列表在顶部边界时继续传递滚动事件。

  3. 改用JS API控制刷新 使用uni.startPullDownRefresh()和uni.stopPullDownRefresh()手动控制刷新：

    onPullDownRefresh() {
    // 处理刷新逻辑
    setTimeout(() => {
        uni.stopPullDownRefresh();
    }, 1000);
}

  4. 调整滚动阈值 在页面style中配置：

    "app-plus": {
    "pullToRefresh": {
        "support": true,
        "color": "#FE8D4D",
        "style": "circle",
        "offset": "100px"
    }
}
回到顶部