使用 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

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

示例：

<view
  class="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 项目交互体验！