uni-app nvue view hover-class 无效

uni-app nvue view hover-class 无效

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：w7

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：苹果X

页面类型：nvue

打包方式：云端

示例代码：

<template>  
    <view style="flex: 1;">  
        <!-- 测试view的 hover-class -->  
        <view style="width: 200rpx;height: 100rpx;background-color: red;" hover-class="tab-css"></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .tab-css{  
        opacity: 0.5;  
    }  
</style>

操作步骤：

<template>  
    <view style="flex: 1;">  
        <!-- 测试view的 hover-class -->  
        <view style="width: 200rpx;height: 100rpx;background-color: red;" hover-class="tab-css"></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .tab-css{  
        opacity: 0.5;  
    }  
</style>

预期结果：

希望能有效

实际结果：

无效

bug描述：

view 的hover-class属性无效

更多关于uni-app nvue view hover-class 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

相关问题帖子：https://ask.dcloud.net.cn/question/122455

更多关于uni-app nvue view hover-class 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还是不行诶

在 nvue 页面中，hover-class 属性确实无法生效。这是因为 nvue 基于原生渲染，其样式和交互行为与 Vue 页面（基于 Webview）存在差异。在 nvue 中，hover-class 这类 CSS 伪类效果不被支持，因为原生组件本身没有直接的 hover 状态。

如果你需要在 nvue 中实现类似 hover 的效果，可以考虑以下替代方案：

  1. 使用 @touchstart 和 @touchend 事件：通过绑定触摸事件来手动切换样式类。例如：
    <template>
  <view 
    :class="[isHover ? 'tab-css' : '']"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    style="width: 200rpx; height: 100rpx; background-color: red;"
  ></view>
</template>
<script>
  export default {
    data() {
      return {
        isHover: false
      };
    },
    methods: {
      handleTouchStart() {
        this.isHover = true;
      },
      handleTouchEnd() {
        this.isHover = false;
      }
    }
  };
</script>
<style>
  .tab-css {
    opacity: 0.5;
  }
</style>
回到顶部