uni-app nvue list图片显示问题

uni-app nvue list图片显示问题

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

HBuilderX类型：

Alpha

HBuilderX版本号：

3.2.10

手机系统：

Android

手机系统版本号：

Android 10

手机厂商：

华为

手机机型：

mate40 pro

页面类型：

nvue

打包方式：

云端

项目创建方式：

HBuilderX

App下载地址或H5网址：

https://apps.apple.com/cn/app/id1538251766

示例代码：

<list ref="list" class="list" :offset-accuracy="5" :bounce="true" fixFreezing="true">
<cell v-if="items.length>0" >
<view style="width: 750rpx;flex-direction: row;justify-content: center;">
<view style="background-color: #FFFFFF;flex-direction: row;flex-wrap: wrap;width: 690rpx;justify-content: space-between;">
<view style="width: 335rpx;" v-for="(item, index) in items" :key="index" :data-index="index" :data-room-id="item.id" @tap="goDetails(item.post_id)">
<productItem  :item="item"></productItem>
</view>
</view>
</view>
</cell>
</list>

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

有时候在nvue list列表中,图片显示不正常,重新进入又正常了,多个页面出现这种情况

示例图片1 示例图片2


更多关于uni-app nvue list图片显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue list图片显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue的list组件中图片显示异常是常见问题，通常由以下原因导致：

  1. 图片缓存机制问题：nvue的image组件在快速滚动时可能出现缓存处理异常，导致图片错位或空白。

  2. 列表回收复用机制：list-cell的复用机制可能导致图片状态残留，特别是当图片异步加载时。

解决方案：

  1. 添加图片加载状态控制：
<image :src="item.img" 
       @load="onImageLoad(index)"
       @error="onImageError(index)"
       style="width: 335rpx; height: 200rpx;">
</image>
  1. 强制图片重新加载：
// 在数据更新后强制刷新图片
this.$nextTick(() => {
    this.$refs.list.refresh()
})
回到顶部