uniappx uvue 在ios环境 hover-class会一直处于点击态 无法恢复

uniappx uvue 在ios环境 hover-class会一直处于点击态 无法恢复

开发环境 版本号 项目创建方式
Windows HBuilderX 
产品分类：uni-app x/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：4.76

手机系统：iOS

手机系统版本号：iOS 14

手机厂商：苹果

手机机型：iphonex

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```javascript
<view hover-class="hover_1" [@click](/user/click).stop="handleScanForm">  
</view>

.hover_1 { //点击效果1 opacity: 0.7; // 降低透明度实现点击效果 transform: scale(0.98); // 轻微缩小实现点击效果 transition: all 0.05s ease-out; // 添加过渡动画 }

操作步骤：

<view hover-class="hover_1" [@click](/user/click).stop="handleScanForm">  
</view>

.hover_1 { //点击效果1 opacity: 0.7; // 降低透明度实现点击效果 transform: scale(0.98); // 轻微缩小实现点击效果 transition: all 0.05s ease-out; // 添加过渡动画 }

预期结果：

点击态可以恢复常规

实际结果：

实际无法恢复

bug描述：

其他环境正常，在ios环境，hover-class会一直处于点击态，无法恢复。uniapp x vue版本：3 文件类型：uvue


10 回复

有人开发ios遇到过这种情况吗？


一样 找不到解决办法

回复 Gongjinwei: 官方这个方式有漏洞，等着修复吧

现在遇到了，我的情况是使用var 变量不行。直接使用色值就正常。 但是在一个全新的项目中使用时又是正常的。奇怪的狠！

<style lang="scss"> .t-grid-item { &--hover { // 正常 background-color: #f2f2f2; // 不正常。点击后背景无法恢复 // background-color: var(--tao-hover-bg); } } </style>

你好，看我下面评论，请在 HBuilderX 中选择帮助-bug 反馈，会带上你的 HBuilderX 版本、运行平台和复现工程，方便追踪问题

回复 DCloud_UNI_OttoJi: 早都提交了。你们看下。复现的demo也提供了。https://issues.dcloud.net.cn/pages/issues/detail?id=21721

可能某些属性可以恢复点击态，官方这个方式有漏洞

问题模板是否写错了 vue 版本？是 uvue 还是 nvue? 如果是 uniapp x 平台，可在 HBuilderX 中选择帮助-bug 反馈，提供复现工程，x 平台问题会有专人处理。

使用的是uvue，vue版本是3，谢谢您的建议，我现在去反馈一下

这是一个已知的iOS平台上的hover-class兼容性问题。在iOS设备上，hover-class状态有时会因为触摸事件的特殊性而无法正常恢复。

建议的解决方案：

  1. 使用@touch事件替代：在iOS环境下，可以尝试使用@touchstart和@touchend事件来手动控制样式切换：
<view 
  :class="{ 'hover_1': isHover }"
  [@touchstart](/user/touchstart)="handleTouchStart"
  [@touchend](/user/touchend)="handleTouchEnd"
  @click="handleScanForm">
</view>

data() {
  return {
    isHover: false
  }
},
methods: {
  handleTouchStart() {
    this.isHover = true
  },
  handleTouchEnd() {
    this.isHover = false
  }
}
  1. 添加active伪类：在CSS中补充:active状态：
.hover_1, .hover_1:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: all 0.05s ease-out;
}
回到顶部