uni-app web-view在list组件里面会导致页面卡死

uni-app web-view在list组件里面会导致页面卡死

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

示例代码：

<list :scrollable="false">
<cell>
<view style="height:840rpx;width: 750rpx;">
<web-view src="http://w.tyfruanjian.com/tour/901b322062c38279" style="height: 900rpx;width: 750rpx;"></web-view>
</view>
</cell>
<cell>
<view style="height:1000rpx;" [@tap](/user/tap)="addressClicked('test')">
<text>测试list组件禁止滚动状态下web-view导致页面卡死</text>
</view>
</cell>
</list>

更多关于uni-app web-view在list组件里面会导致页面卡死的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app web-view在list组件里面会导致页面卡死的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的性能问题。在 list 组件中嵌套 web-view，尤其是当 list 的 scrollable 设置为 false 时，确实容易导致页面卡死或性能急剧下降。

主要原因如下：

  1. web-view 的重量级特性：web-view 本质上是一个原生 WebView 组件，它本身就是一个完整的浏览器环境，占用内存和 CPU 资源非常高。将其放入滚动列表（即使是禁止滚动的列表）中，会显著增加页面渲染的负担。

  2. list 组件的渲染机制：list 组件在渲染大量或复杂子组件时，如果处理不当，容易引发性能问题。当内部包含像 web-view 这样的“重量级”组件时，问题会被放大。

  3. scrollable="false" 的潜在影响：虽然你禁用了 list 的滚动，但 web-view 内部可能仍然存在滚动内容或复杂的交互，这可能导致手势或事件冲突，在某些情况下引发渲染阻塞。

建议的解决方案：

方案一（推荐）：避免在列表内嵌套 web-view 这是最根本的解决方案。web-view 不适合作为列表项频繁渲染。可以考虑以下替代设计：

  • 独立页面：点击列表项后，通过 navigateTo 跳转到一个新的独立页面，该页面专门用于显示这个 web-view 内容。
  • 模态窗口：点击后，在一个全屏或大型的 uni-popup 或自定义模态层中加载 web-view。
  • 条件渲染：如果必须在当前页面，可以改为使用 v-if 控制单个 web-view 的显示与隐藏，而不是在 list 中渲染多个。

方案二：优化现有结构（如果必须保留） 如果因特殊原因必须保留在列表内，可以尝试以下优化，但无法根治性能隐患：

  • 移除 list 和 cell：既然 scrollable="false"，且你似乎只需要一个静态的垂直布局，可以直接使用 view 代替 list 和 cell。这能减少一层组件嵌套和可能的滚动冲突。
    <view>
    <view style="height:840rpx;width: 750rpx;">
        <web-view src="http://w.tyfruanjian.com/tour/901b322062c38279" style="height: 900rpx;width: 750rpx;"></web-view>
    </view>
    <view style="height:1000rpx;" @tap="addressClicked('test')">
        <text>测试内容</text>
    </view>
</view>
回到顶部