1 Star 0 Fork 0

ScenarioSamples/HoldingMenu

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

Web页面长按菜单

介绍

本示例共介绍了长按Web页面元素,会在元素显示菜单弹窗的使用场景,方便开发者开发类似场景。

效果预览

约束与限制

1.仅支持标准系统上运行,支持设备:华为手机或运行在DevEco Studio上的华为手机设备模拟器。

2.支持 API Version 12 Release及以上版本。

3.支持 HarmonyOS 5.0.0 Release SDK及以上版本。

4.需要使用DevEco Studio 5.0.0 Release及以上版本进行编译运行。

使用说明

长按Web页面元素,会在元素显示菜单弹窗。

实现思路

1.设置Web组件onContextMenuShow属性,获取Web页面元素的状态标识;设置bindPopup属性,为Web组件设置Popup弹窗。

Web({ src: this.webUrl, controller: this.webviewController })
    .onContextMenuShow((event) => {
        if (event) {
            // 对长按元素进行状态标识以及获取长按位置
        }
    })// 根据分类的状态标识进行相应操作
    .bindPopup(this.showMenu, PopupOptions)

2.自定义menuBuilder,实现不同的元素要执行的操作。

  @Builder
  menuBuilder() {
    // 以垂直列表形式显示的菜单。
    Menu() {
      ForEach(this.holdMenuItemKeys, (holdMenuItemKey: number) => {
        ForEach(this.holdMenuItemMap.get(holdMenuItemKey), (holdMenuItem: HoldMenuItem) => {
          this.menuItemBuilder(holdMenuItem.content, holdMenuItem.func)
        })
      })
    }
  }

工程目录

entry/src/main/ets                            // hap类型, 场景页面代码所在模块
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets
|---model
|   |---CollapseModel.ets
|---pages
|   |---MainPage.ets                           // 场景主页
|---views
|   |---holdingMenu                            // web页面长按菜单页面
|   |   |---HoldImgMenu.ets
|   |---Collapse.ets
InteractWebAndApp                              // har模块,web前端页与应用侧交互实现
LoadWebPage                                    // har模块,web前端页加载以及公共实现

参考文档

Web组件

ChangeLog

修改内容 时间
首版本 2025.3.12

空文件

简介

【鸿蒙 Harmony Next 示例 代码】本示例共介绍了长按Web页面元素,会在元素显示菜单弹窗的使用场景,方便开发者开发类似场景。 展开 收起
HTML 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/scenario-samples/holding-menu.git
git@gitee.com:scenario-samples/holding-menu.git
scenario-samples
holding-menu
HoldingMenu
master

搜索帮助