uni-app nvue list 图片列表 加载回收问题

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app nvue list 图片列表 加载回收问题

示例代码：

<cell v-for="(item,index) in msgList" :key="item.pkId"> <text class="textClass">长文本</text> <image src:"图片地址"> </image> </cell> ```

操作步骤：

list cell 中使用<image>加载图片 内存只增不减

预期结果：

内存保持一定状态

实际结果：

内存只增不减


| 信息类别       | 信息内容           |
|----------------|--------------------|
| 产品分类       | uniapp/App         |
| PC开发环境     | Mac                |
| PC系统版本     | Retina, 13-inch, 2020 |
| 手机系统       | iOS                |
| 手机系统版本   | iOS 18             |
| 手机厂商       | 苹果               |
| 手机机型       | iphoneX            |
| 页面类型       | nvue               |
| Vue版本        | vue3               |
| 打包方式       | 离线               |
| 项目创建方式   | CLI                |
| CLI版本号      | 3                  |

Harmonyos Next教程
7 回复

weex已经淘汰，nvue也不维护了。在意体验请使用uni-app x，不敏感的请使用vue页面


项目上线一段时间了 ，再换也来不及了，有没有可以避免这个问题的方案

回复 果李程: nvue还有一个recycle-list

回复 DCloud_heavensoft:使用的z-paging的插件 看插件文档 好像没有recycle-list的配置 默认使用的是list

回复 果李程: 它家插件有个vue可用的虚拟列表，用那个也可以，也能避免内存一直涨。当然最好的是uvue，专门优化和测试过这个

回复 DCloud_heavensoft: 使用页面滚动或nvue时，不支持虚拟列表。在nvue中z-paging内置了list组件，效果与虚拟列表类似，并且可以提供更好的性能。 --所以才看的list 然而这个list的回收 有问题

在uni-app中使用nvue开发时，处理图片列表的加载与回收是一个常见的性能优化问题。特别是当列表项中包含大量图片时，合理的图片加载与回收机制可以显著提升应用的性能和用户体验。以下是一个简单的示例，展示如何在nvue中实现图片列表的加载与回收。

1. 初始化项目与页面结构

首先，确保你的uni-app项目已经创建并配置好nvue支持。然后，在页面的<template>中定义一个图片列表：

<template>
  <div>
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div v-for="(item, index) in list" :key="index" class="item">
        <image :src="item.src" @load="onLoadImage" @error="onErrorImage" :style="{ display: isItemVisible(index) ? 'block' : 'none' }"></image>
      </div>
    </scroll-view>
  </div>
</template>

2. 数据与方法定义

在<script>部分，定义列表数据和一个方法来控制图片的可见性：

<script>
export default {
  data() {
    return {
      list: [
        // 假设这里有一系列图片数据
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' },
        // ...更多图片
      ],
      visibleRange: []
    };
  },
  methods: {
    isItemVisible(index) {
      return this.visibleRange.includes(index);
    },
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      const itemHeight = 200; // 假设每个列表项的高度为200px
      const screenHeight = uni.getSystemInfoSync().windowHeight;
      const start = Math.floor(scrollTop / itemHeight);
      const end = Math.floor((scrollTop + screenHeight) / itemHeight);
      this.visibleRange = Array.from({ length: end - start + 1 }, (_, i) => i + start);
    }
  },
  onPageScroll: function(e) {
    this.onScroll(e);
  }
};
</script>

3. 样式定义

在<style>部分，为列表项定义基本样式：

<style>
.item {
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.item image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

4. 注意事项

  • 滚动事件监听：通过监听onPageScroll事件，获取当前滚动位置，并根据滚动位置计算可见的图片范围。
  • 图片加载与错误处理：通过@load和@error事件处理图片加载成功和失败的情况。
  • 性能优化：通过动态控制图片的显示与隐藏，避免不必要的图片加载，提升性能。

这个示例展示了如何在nvue中通过计算可见范围来优化图片列表的加载与回收。在实际项目中，你可能需要根据具体需求调整代码，比如动态计算列表项的高度，或者引入更复杂的图片加载库。

回到顶部