uni-app中nvueStyleCompiler为uni-app时 view的hover-class无效

uni-app中nvueStyleCompiler为uni-app时 view的hover-class无效

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX
uniapp/App

示例代码：

<template>  
  <view>  
    <view class="btn a" hover-class="b" @click="test">  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
    }  
  },  
  methods: {  
    test() {  
      console.log('click!')  
    }  
  }  
}  
</script>  

<style>  
.btn {  
  width: 750rpx;  
  height: 200rpx;  
}  
.a {  
  background-color: #f00;  
}  
.b {  
  background-color: #0f0;  
}  
</style>

操作步骤：

  1. 新建一个默认的uniapp项目，新建一个nvue页面，写入上面的示例代码。
  2. 在 manifest.json 将 nvueStyleCompiler 设置为 uni-app。
  3. 运行至手机，发现点击 view ，view 的颜色并没有更改。
  4. 在 manifest.json 将 nvueStyleCompiler 设置为 weex。
  5. 重新运行至手机，点击 view 颜色正常更改。

预期结果：

nvueStyleCompiler 为 uni-app 时 view 颜色正常更改。

实际结果：

nvueStyleCompiler 为 uni-app 时点击 view ，view 的颜色并没有更改。

bug描述：

当 nvueStyleCompiler 设置为 uni-app 时，view 的 hover-class 将无效，改为 weex 时正常。


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

2 回复

感谢您的反馈！ 相关问题帖子：https://ask.dcloud.net.cn/question/122455

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


在 nvueStyleCompiler 设置为 uni-app 时，hover-class 失效是已知的样式编译模式差异。uni-app 模式使用更严格的 Vue 样式编译，而 hover-class 在 nvue 中本身是 weex 的原生特性。当切换到 uni-app 模式时，部分 weex 样式行为可能不被完全支持，导致交互状态类失效。

解决方案：
若需使用 uni-app 模式，建议改用 Vue 的交互状态控制方式，例如通过 :class 绑定动态类名，配合 @touchstart 和 @touchend 事件手动切换状态：

<template>
  <view>
    <view 
      class="btn a" 
      :class="{ b: isHover }"
      @touchstart="isHover = true"
      @touchend="isHover = false"
      @click="test">
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isHover: false
    }
  },
  methods: {
    test() {
      console.log('click!')
    }
  }
}
</script>
回到顶部