浏览器应用PC场景下的键鼠适配之右键交互及hover提示实现

浏览器应用PC场景下的键鼠适配之右键交互及hover提示实现

HarmonyOS
2024-06-11 20:40:01
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
blue76

在PC场景下,鼠标左键常常意味着用户要触发点击处的功能(通常是单一明确的);而鼠标右键,则是给用户提供更多的选项,让用户有更多的可选操作项;

而hover提示,则是当前用户鼠标hover到某个控件时,给出相关功能的提示信息,让用户快速了解这块交互能力;

本篇总结,就是介绍一下浏览器应用在右键交互及hover提示方面的实现;

鼠标右键的实现

在PC上,鼠标右键呼出相关菜单项,是非常常见的场景;浏览器应用在网页标题栏的相关操作,就是典型场景:

右键菜单的实现,分解的话,有3个核心步骤:

1.监听右键,2.展示菜单,3.是菜单项的逻辑处理

在使用系统api上,主要使用的是菜单控制相关的bindContextMenu;(https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md/#%E5%B1%9E%E6%80%A7)



名称




参数类型




描述


bindContextMenu8+

content: CustomBuilder,

responseType: ResponseType

options?: ContextMenuOptions

给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。

responseType: 菜单弹出条件,长按或者右键点击。

options: 配置弹出菜单的参数。


核心代码:

bindContextMenu(this.MenuBuilder(), ResponseType.RightClick)

当前,复杂的业务处理逻辑,需要业务进行处理,工作量还是有一些的;

Hover提示信息的实现

Hover通常在PC场景下,用于提示用户相关操作的说明信息,是同用户交互常见场景;

浏览器的典型应用场景如下:

在实现上主要用到的是popup弹框;

https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md/

具体实现时,使用onHover进行事件监听,使用.bindPopup进行弹出相关提示信息

.onHover(isHover => { 
 
  this.state.isHover = isHover; 
 
}) 
 
  .bindPopup(this.state.isHover ?? false, { 
 
    builder:this.popupBuilder(), 
 
    placement:Placement.Bottom, 
 
    enableArrow:false, 
 
    mask:false, 
 
    popupColor: $r('sys.color.ohos_id_color_dialog_bg') 
 
  })
分享
微博
QQ
微信
回复
2024-06-12 17:38:49
相关问题
浏览器应用应该怎样拉起?
49浏览 • 2回复 待解决
有谁知道如何拉起浏览器应用
763浏览 • 1回复 待解决
Web组件是否支持浏览器localstorage?
496浏览 • 1回复 待解决
浏览器下载文件如何导入鸿蒙
5736浏览 • 1回复 待解决
穿越功能要如何使用
54浏览 • 1回复 待解决
服务卡片webview如何跳转系统浏览器
6754浏览 • 2回复 待解决
如何打开穿越功能开关
1130浏览 • 1回复 待解决
安卓App或者浏览器如何跳转鸿蒙App
8663浏览 • 1回复 待解决
woekertaskpool简单实现
360浏览 • 1回复 待解决