当前位置: 首页 > ops >正文

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

目录

一、什么是 hover-class

二、常用组件支持 hover-class

三、基本

效果说明:

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

五、注意事项

六、实践建议


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

一、什么是 hover-class

hover-classuni-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-timehover-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 项目交互体验!

http://www.xdnf.cn/news/6083.html

相关文章:

  • 数字信号处理-大实验1.2
  • 一文掌握六个空转数据库
  • 编译支持CUDA-aware的OpenMPI
  • 数字化转型 - 标准化
  • MySQL锁机制全面解析:从原理到实践的死锁防治指南
  • C++23 ranges::to:范围转换函数 (P1206R7)
  • LeRobot 框架的核心架构概念和组件(中)
  • 深度学习中的查全率与查准率:如何实现有效权衡
  • CS4334立体声D/A转换器:为高品质音频设计提供低成本的解决方案
  • 音频分类的学习
  • css设置文字两端对齐text-align:justify不起作用的解决方法
  • HTML应用指南:利用POST请求获取全国圆通快递服务网点位置信息
  • ​​金融合规革命:​​R²AIN SUITE 如何重塑银行业务智能​
  • 入侵检测SNORT系统部署过程记录
  • 数据结构与算法-双向链表专题
  • Spring AI 集成 Mistral AI:构建高效多语言对话助手的实战指南
  • 毕业论文,如何区分研究内容和研究方法?
  • C#中的dynamic与var:看似相似却迥然不同
  • Ota++框架学习
  • 胶片转场视频剪辑思路
  • tocmat 启动怎么设置 jvm和gc
  • 大模型训练简介
  • 华硕服务器-品类介绍
  • RBTree的模拟实现
  • MySQL之基础事务
  • 常用的应用层网络协议对比
  • 从零玩转系列之 MCP AI Agent 理论+项目实战开发你的MCP Server
  • UOS专业版上通过源码安装 Python 3.13 并保留系统默认版本
  • 310. 最小高度树
  • 『 测试 』软件测试全流程与Bug管理核心要点解析