鸿蒙5.0开发进阶：JS组件-通用事件

最新推荐文章于 2025-12-04 07:21:48 发布
原创 最新推荐文章于 2025-12-04 07:21:48 发布 · 221 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #ArkUI #ArkTS #前端

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

通用事件

相对于私有事件，大部分组件都可以绑定如下事件。

名称参数描述
click-点击动作触发该事件。
longpress-长按动作触发该事件。
swipe5+SwipeEvent组件上快速滑动后触发。

SwipeEvent 基础事件对象属性列表（继承BaseEvent）

属性类型说明
directionstring

滑动方向，可能值有：

1. left：向左滑动；

2. right：向右滑动；

3. up：向上滑动；

4. down：向下滑动。

鸿蒙5.0进阶开发：UI开发-自定义组件节点 (FrameNode)
AyomQAQ的博客
12-28 1185
对于拥有自定义前端的第三方框架（如JSON、XML、DOM树等），需将特定的DSL转换为ArkUI的声明式描述。
鸿蒙5.0开发进阶：Web页面长截图实现案例
HSMMQAQ的博客
10-09 1118
本案例实现了Web组件中网页长截图的方案。
鸿蒙5.0开发进阶：JS组件-基础组件（select）
Androidbye的博客
02-27 465
下拉选择按钮，可使用下拉菜单展示并选择内容。
鸿蒙5.0开发进阶：JS组件-通用方法
Androidbye的博客
02-18 658
当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。
鸿蒙5.0开发进阶：JS组件-通用样式
Androidbye的博客
02-18 647
组件普遍支持的可以在style或css中设置组件外观样式。
鸿蒙5.0开发进阶：ArkUI框架-JS基础组件（chart）
Androidbye的博客
03-18 1176
图表组件，用于呈现线形图、柱状图、量规图界面。
鸿蒙5.0开发进阶：JS组件-基础组件（picker）
Androidbye的博客
02-25 968
滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
鸿蒙5.0开发进阶：JS组件-svg组件（svg）
Androidbye的博客
03-03 317
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
鸿蒙5.0开发进阶：JS组件-通用属性
Androidbye的博客
02-18 958
常规属性是指组件普遍支持的用来设置组件基本标识和外观显示特征的属性。
鸿蒙5.0开发进阶：JS组件-基础组件（label）
Androidbye的博客
02-25 1132
为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。
鸿蒙5.0开发进阶：JS组件-基础组件（web）
Androidbye的博客
02-28 368
展示网页内容的组件。
鸿蒙5.0进阶开发：ArkTS卡片开发-配置卡片的配置文件
AyomQAQ的博客
02-06 748
卡片相关的配置文件主要包含FormExtensionAbility的配置和卡片的配置两部分。
HarmonyOS鸿蒙开发实战（5.0）Web页面长截图实践
weixin_55362248的博客
09-21 1611
本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。
【鸿蒙实战开发】基于JS通用组件的鸿蒙购物应用开发实现
HarmonyOS007的博客
08-06 1460
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
Electron for 鸿蒙PC项目实战案例之记忆卡片游戏
风中追风
12-02 913
这是一个基于Electron for 鸿蒙PC的记忆翻牌游戏实现，专为初学者设计。玩家需要翻转卡片，找到匹配的一对，锻炼记忆力和专注力。游戏支持不同难度级别和多种卡片主题。
Flutter 与开源鸿蒙（OpenHarmony）深度集成：从插件开发到分布式能力实战（续篇）
2501_93573294的博客
12-01 1150
Flutter 与开源鸿蒙（OpenHarmony）深度集成：从插件开发到分布式能力实战（续篇）
开源鸿蒙+Flutter：跨端开发的分布式协同与数据互通实践
最新发布
2501_93930602的博客
12-04 783
开源鸿蒙与Flutter的分布式集成，打破了单一设备的功能边界，构建了“设备协同、数据互通”的跨端开发新范式。通过本文的分布式架构解析、极简代码示例与工程化实践指南，开发者可快速上手分布式应用开发，实现从“单设备应用”到“全场景分布式应用”的升级。未来，随着开源鸿蒙分布式能力的持续增强（如跨设备音视频协同、分布式AI能力共享）与Flutter的深度适配，二者的融合将在更多分布式场景（如工业控制、智慧医疗）中释放价值，成为全场景智慧生态开发的核心解决方案。
跑酷游戏 - Electron for 鸿蒙PC项目实战案例
春卷同学的博客
12-04 570
跑酷游戏是一款基于Electron开发的桌面动作跑酷游戏应用，玩家控制角色在各种障碍物之间跳跃、滑动和冲刺，尽可能跑得更远并获得更高分数。本项目采用纯前端技术栈开发，为鸿蒙PC平台提供了刺激好玩的跑酷游戏体验。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性 #### 1. `touchable` 属性 `touchable` 属性用于控制组件是否可以响应触摸事件。设置为 `true` 时，组件将可以响应触摸事件；设置为 `false` 时，组件将忽略所有触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .touchable(true) } .width('100%') .height(100) } } ``` #### 2. `hitTestBehavior` 属性 `hitTestBehavior` 属性用于定义组件在命中测试（Hit Test）中的行为。它有以下几种取值： - `HitTestBehavior.self`: 组件仅在其自身的区域内响应触摸事件。 - `HitTestBehavior.none`: 组件不响应任何触摸事件。 - `HitTestBehavior.default`: 组件按照默认行为响应触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .hitTestBehavior(HitTestBehavior.self) } .width('100%') .height(100) } } ``` #### 3. 自定义触摸热区 如果需要更复杂的触摸热区配置，可以通过自定义组件的 `onTouch` 事件来实现。通过监听触摸事件，开发者可以自定义组件的响应逻辑。 ```ts @Component struct MyComponent { @State message: string = 'Touch Me' build() { Column() { Text(this.message) .fontSize(30) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.message = 'Touched Down' } else if (event.type === TouchType.Up) { this.message = 'Touched Up' } }) } .width('100%') .height(100) } } ``` ### 注意事项 - **性能优化**：在设置触摸热区时，应避免不必要的复杂逻辑，以确保应用的响应速度和性能。 - **交互设计**：触摸热区的设计应符合用户习惯，避免过于敏感或响应区域过小的问题。 通过以上方法，开发者可以灵活地配置 ArkTS 组件的触摸热区属性，以满足不同的交互需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值