uni-app NVUE recycle-list 闪退

uni-app NVUE recycle-list 闪退

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

操作步骤：

<template> <view class="" style="flex: 1;" > <recycle-list style="height: 200px;" for="(item, i) in [ { type: 'A' }, { type: 'B' }, { type: 'B' }, { type: 'A' }, { type: 'B' } ]"> <cell-slot> <text class="text-white" @tap="playTVVideo(i)">- {{item.type}} {{i}} -</text> </cell-slot> </recycle-list> <text class=" text-white" style="font-family: iconfont;"></text> </view> </template> ```

预期结果：

正常显示


### 实际结果：


页面卡死 然后闪退

bug描述：

<recycle-list> 加 任意 自定义icon 页面卡死 然后闪退


更多关于uni-app NVUE recycle-list 闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

顶一下，同样遇到，都不报错，直接闪退了

更多关于uni-app NVUE recycle-list 闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 NVUE 中使用 recycle-list 组件时，如果同时引入自定义字体图标（如示例中的 iconfont），确实可能导致页面卡死或闪退。这是因为 recycle-list 基于 Weex 的原生渲染机制，而自定义字体加载可能与原生列表的渲染流程存在兼容性问题。

问题分析：

  1. recycle-list 是高性能长列表组件，依赖严格的视图回收机制，对内部节点的渲染类型较为敏感。
  2. 自定义字体（如 iconfont）需要通过 CSS font-family 加载字体文件，在 NVUE 中可能触发异步资源加载，与 recycle-list 的同步渲染逻辑冲突。
  3. 当 cell-slot 内的节点结构或样式包含非标准字体时，容易导致原生渲染线程阻塞，进而引发闪退。

解决方案：

  1. 分离字体与列表：将自定义字体图标移出 recycle-list 范围，确保列表内部仅包含纯文本或基础组件。
  2. 简化列表内容：在 cell-slot 中避免使用需加载外部资源的样式（如自定义字体），改用原生支持的图标组件（如 <text class="icon">●</text> 模拟图标）。
  3. 检查字体加载时机：若必须使用字体图标，可在页面初始化时预加载字体，并通过 v-if 控制列表的渲染时机，确保字体加载完成后再渲染列表。

示例修改：

<template>
  <view style="flex: 1;">
    <recycle-list for="(item, i) in listData">
      <cell-slot>
        <!-- 移除字体图标，改用纯文本或静态图标 -->
        <text class="text-white" @tap="playTVVideo(i)">- {{item.type}} {{i}} -</text>
      </cell-slot>
    </recycle-list>
    <!-- 将字体图标移至列表外部 -->
    <text class="iconfont"></text>
  </view>
</template>
回到顶部