uni-app Nvue list的cell中的view若设置hover-class，刷新列表，显示异常

uni-app Nvue list的cell中的view若设置hover-class，刷新列表，显示异常

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.6
手机系统 Android
手机系统版本号 Android 7.1.1
手机厂商 模拟器
手机机型 VOG-AL00
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 用demo中代码运行，下拉刷新列表

预期结果：

  • 列表显示正常，图片正常显示

实际结果：

  • 显示异常，新数据却照着上次的布局显示

bug描述：

nvue，android手机，list中cell中的view如果设置hover-class，刷新数据时list的数据直接赋值时，显示不正常。新数据还是显示上一个布局，假如新数据第一条有图片，旧数据第一条没图片，那图片就无法显示。


更多关于uni-app Nvue list的cell中的view若设置hover-class，刷新列表，显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

有人看看吗

更多关于uni-app Nvue list的cell中的view若设置hover-class，刷新列表，显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


^^^ |||||


manifest.json 里是否设置了 “nvueStyleCompiler” : “uni-app”

设置了，你看下，我上传的附件代码是设置了的

回复 1***@qq.com: 恩，如果未依赖新版编译器的特性，可以先关闭：设置为 weex

在nvue页面中，当list组件的cell内view设置了hover-class时，确实可能出现刷新列表后布局显示异常的问题。这通常是由于nvue的原生渲染机制与hover-class的样式处理存在兼容性问题导致的。

问题分析：

  1. hover-class在nvue中会动态修改组件的样式类，可能干扰了列表项的复用机制
  2. 列表数据更新时，cell的渲染可能出现样式残留
  3. 特别是图片等媒体元素的显示容易受到影响

解决方案：

  1. 移除hover-class：如果不需要hover效果，直接移除hover-class属性
  2. 使用CSS替代：通过伪类或动态class实现hover效果
.cell-item:active {
  background-color: #f0f0f0;
}
  1. 强制刷新：在更新列表数据后，调用this.$forceUpdate()
  2. key值管理：为每个list-item设置唯一的key属性，确保正确复用

推荐做法：

<list>
  <cell v-for="(item, index) in listData" :key="item.id">
    <view class="cell-item" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
      <!-- 内容 -->
    </view>
  </cell>
</list>
回到顶部