使用 hover-class 实现触摸态效果 - uni-app 教程

目录

一、什么是 hover-class

二、常用组件支持 hover-class

三、基本

效果说明：

四、配合 hover-start-time 和 hover-stay-time

五、注意事项

六、实践建议

---

在移动端开发中，良好的用户交互体验尤为重要，点击或长按某个按钮时，给予用户视觉反馈是常见的做法。uni-app 提供了 hover-class 属性，可以非常方便地实现这一效果。

一、什么是 hover-class

hover-class 是 uni-app 中组件的一个属性，用于指定当用户按下并保持触摸某个组件时，组件应该添加的 CSS 类名。通过这个类名，我们可以设置触摸时的样式，比如背景色变化、边框加粗等。

二、常用组件支持 hover-class

以下组件原生支持 hover-class：

• <view>

• <button>

• <navigator>

• <cover-view>

• <movable-view>

三、基本

<view class="btn" hover-class="btn-hover">点击我
</view>

CSS 样式：

<style>
.btn {background-color: #007AFF;color: white;padding: 10px 20px;border-radius: 5px;text-align: center;
}
.btn-hover {background-color: #005BBB;
}
</style>

效果说明：

• 正常状态下，按钮是蓝色；

• 按住（touch）按钮时，会变成深蓝色；

• 松开后恢复原样。

四、配合 hover-start-time 和 hover-stay-time

除了指定类名外，还可以配合以下两个属性控制响应时间：

属性名	说明	默认值
hover-start-time	手指按下到产生 hover 状态所需的时间（ms）	50
hover-stay-time	手指松开后 hover 状态保留时间（ms）	400

示例：

<viewclass="btn"hover-class="btn-hover"hover-start-time="0"hover-stay-time="200"
>快速反馈按钮
</view>

五、注意事项

1. 只有在真机中才能完全体现 hover 效果，H5 和小程序开发工具可能表现不同；

2. 如果组件本身是不可点击（如 disabled 的按钮），则 hover-class 不会生效；

3. hover-class="none" 可以禁止触摸样式，适用于某些不需要反馈的场景。

六、实践建议

• 推荐为交互性强的元素都添加 hover-class；

• 样式尽量不要跳变太剧烈，建议轻微变色或阴影增强；

• 可结合动画类名进行更多扩展（如使用 transition）。

---

希望这篇文章能帮助你更好地理解和使用 hover-class，提升你的 uni-app 项目交互体验！