uni-app scroll-view 包裹 uni-refresh 在app运行时失败，滚动内容出现白板

开发环境	版本号	项目创建方式
Windows	3.2.1	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：华为畅享

页面类型：vue

打包方式：云端

### 示例代码：

```html
<!-- <scroll-view> -->
<uni-refresh class="refresh" [@refresh](/user/refresh)="onrefresh" [@pullingdown](/user/pullingdown)="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<div class="refresh-view">
<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}" :class="{'refresh-icon-active': refreshFlag}"></image>
<uni-load-more v-if="refreshing" class="loading-icon" status="loading" :contentText="loadingMoreText"></uni-load-more>
<text class="loading-text">{{refreshText}}</text>
</div>
</uni-refresh>

操作步骤：

scroll-view 的注释打开之后，scroll-view内的元素都不能正常显示

预期结果：

scroll-view 内容可以正常显示

实际结果：

scroll-view 内容显示异常

bug描述：

scroll-view 包裹的内容不显示

更多关于uni-app scroll-view 包裹 uni-refresh 在app运行时失败，滚动内容出现白板的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼作者

更多关于uni-app scroll-view 包裹 uni-refresh 在app运行时失败，滚动内容出现白板的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中，scroll-view 与 uni-refresh 的嵌套使用确实存在兼容性问题。根据你的描述，当 scroll-view 包裹 uni-refresh 时，内容显示异常（如白屏），这通常是由于以下原因导致的：

布局冲突：scroll-view 作为滚动容器，其内部子元素的高度计算可能异常，尤其是当 uni-refresh 作为其直接子元素时，两者在 App 端的渲染机制可能存在冲突。
组件嵌套限制：uni-refresh 本身是为页面级下拉刷新设计的，通常建议直接放在页面根节点下，而非嵌套在 scroll-view 内。在 App 端，这种嵌套可能导致渲染失败。

解决方案：

避免嵌套：将 uni-refresh 移出 scroll-view，直接放在页面根节点下，使用页面自身的下拉刷新功能。如果需局部滚动，可让页面整体滚动，而非依赖 scroll-view。
使用替代方案：如果必须用 scroll-view 实现局部滚动，可考虑使用 scroll-view 的自定义下拉刷新（通过 refresher-enabled 属性），而非 uni-refresh 组件。示例：
```
<scroll-view refresher-enabled [@refresherrefresh](/user/refresherrefresh)="onrefresh" [@refresherpulling](/user/refresherpulling)="onpullingdown">
  
</scroll-view>
```