uni-app 【报Bug】view组件hover-class属性失效（App-nvue、vue3）

uni-app 【报Bug】view组件hover-class属性失效（App-nvue、vue3）

操作步骤：

<view hover-class="bg-primary" ><text>测试</text></view>  
.bg-primary{background-color:red;}

预期结果：

点击使背景为红色

实际结果：

背景没有任何变化


### bug描述：

vue3模式下，view组件hover-class属性在app-nvue页面下设置无反应，其他端正常。
2 回复

已加分，感谢您的反馈！ 请查看相关问题帖子：https://ask.dcloud.net.cn/question/122455

更多关于uni-app 【报Bug】view组件hover-class属性失效（App-nvue、vue3）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 app-nvue 页面中，hover-class 属性确实存在限制。由于 nvue 基于原生渲染，其样式和交互行为与 vue 页面有所不同。在 nvue 中，hover-class 通常无法直接作用于 view 组件，尤其是在嵌套 text 组件的情况下。

解决方案：

  1. 移除 view 内部的 text 组件，直接使用 view 包裹文本内容，并确保 view 组件设置了合适的尺寸（如 width 和 height）。
  2. 如果必须使用 text 组件，可以尝试将 hover-class 移至 text 组件上，但注意 text 组件在 nvue 中可能对背景样式的支持有限。
  3. 考虑使用 touch 事件（如 @touchstart 和 @touchend）手动实现点击反馈效果，通过动态绑定样式类来模拟 hover-class 行为。

示例代码（手动实现点击反馈）：

<template>
  <view 
    :class="{ 'bg-primary': isActive }"
    @touchstart="isActive = true"
    @touchend="isActive = false"
  >
    <text>测试</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const isActive = ref(false);
</script>

<style>
.bg-primary {
  background-color: red;
}
</style>
回到顶部