Skip to main content

moregeek program

HarmonyOS ArkUI之自定义组件侧滑菜单(JS)-多极客编程

作者:梁青松


前言


鸿蒙这次API7更新除了新增TS声明式开发之外,还有JS开发也增加了很多API,JS开发自定义组件越来越方便了。


本项目基于ArkUI中JS扩展的类Web开发范式,关于语法和概念直接看官网官方文档地址:
基于JS扩展的类Web开发范式1 基于JS扩展的类Web开发范式2


本文介绍最新出的插槽用法,实现侧滑菜单、支持两种风格、支持快速滑动打开关闭。


ArKUI系列文章


【HarmonyOS ArkUI之仿微信朋友圈图片预览】


【HarmonyOS ArkUI之仿微信图片选择】


【HarmonyOS ArkUI之自定义组件侧滑菜单(JS)】


效果演示


image.png


主要知识点


触摸事件自定义组件父子组件传递参数api=7新出的slot插槽


实现思路


自定义组件的逻辑都在此目录下:entry/js/default/pages/drawer


主要使用onTouch相关事件,滑动改变菜单布局或内容布局的left偏移量,手指抬起使用动画完成偏移量


1、onTouch相关事件


只贴出了关键代码


    /**
* 触摸按下
*/
onTouchStart(event) {
// 记录首次按下的x坐标
this.pressX = event.touches[0].localX
// 记录上次的x坐标
this.lastX = this.pressX
.....
},
/**
* 触摸移动
*/
onTouchMove(event) {
// 当前x坐标
let localX = event.touches[0].localX
// 计算与上次的x坐标的偏移量
let offsetX = this.lastX - localX;
// 记录上次的x坐标
this.lastX = localX
// 累计偏移量
this.offsetLeft -= offsetX

// 设置偏移量的范围
.....
}

/**
* 触摸抬起
*/
onTouchEnd(event) {

......

// 手指抬起,根据情况,判断toX的值,也就是判断关闭或开启菜单的情况
// 当移动偏移量大于菜单一半宽度,完全打开菜单,否则反之
if (this.offsetLeft > this.menuWidth / 2) {
toX = this.menuWidth
} else {
toX = 0
}

......

// 开启动画
this.startAnimator(toX)

}
/**
* 开启动画
*/
startAnimator(toX) {
// 设置动画参数
let options = {
duration: ANIMATOR_DURATION, // 持续时长
fill: 'forwards', // 启停模式:保留在动画结束状态
begin: this.offsetLeft, // 起始值
end: toX // 结束值
};
// 更新动画参数
this.animator.update(options)
// 监听动画值变化事件
this.animator.onframe = (value) => {
this.offsetLeft = value
this.changeMenuOffsetLeft()
}
// 开启动画
this.animator.play()
},

2、showStyle



  • 0 第一种样式下,解决设置z-index之后菜单界面在内容下面,但点击事件却还在内容上面的问题。




  • 初始化设置left偏移量




  • 动画结束,判断菜单是否关闭,关闭直接设置菜单偏移量为负的菜单宽度


    注意:目前使用插槽之后,预览器不走生命周期方法:onShow。



    export default {
// 使用外部传入
props: ['showStyle'],// 显示样式:0菜单在下面,1菜单在上面
......
}
/**
* 界面显示
*/
onShow() {
.....
// 设置菜单偏移量为负的菜单宽度,为了解决z-index设置后,菜单界面到内容下面,
// 事件还停留到内容上面,导致点击菜单区域,响应的还是菜单点击事件
this.menuOffsetLeft = -this.menuWidth
}

3、使用具名插槽封装


<div id="drawer-container" class="drawer-container" on:touchstart="onTouchStart"
on:touchmove="onTouchMove" on:touchend="onTouchEnd">

<div class="drawer-content" style="left : {{ showStyle == 0 ? offsetLeft : 0 }} px;
z-index : {{ zIndexContent }};" on:click="closeMenu">

<!--具名插槽,根据名称加入对应的插槽中-->
<slot name="content"></slot>

</div>

<stack class="drawer-menu" style="z-index : {{ zIndexMenu }};">
<div class="drawer-menu-background" style="opacity : {{ menuBgOpacity }};"></div>
<div style="width : {{ menuWidth }} px; height : 100%;
left : {{ menuOffsetLeft }} px;" on:click="clickMenu">

<!--具名插槽,根据名称加入对应的插槽中-->
<slot name="menu"></slot>

</div>
</stack>

</div>

4、index页面使用


<!--引入自定义组件-->
<element name='drawer' src='../drawer/drawer.hml'></element>
<div class="container">
<!--通过传值设置样式-->
<drawer show-style="0">
<!--根据名称加入对应的插槽中-->
<div slot='content' class="content-layout">
<div class="title-bar">
<text>主页</text>
</div>
<div class="mainpage-content">
<text class="content1">我是内容页面</text>
<text class="content2">V1.0.0</text>
<text class="content2">梁迪迪</text>
</div>
</div>

<div slot='menu' class="menu-layout">
<div class="my-info">
<image src="common/images/head_photo.png"></image>
<text>登录 | 注册</text>
</div>
<div class="menu-content">
<div for="{{ listMenu }}" tid="{{ $item.id }}" on:click="menuSkip({{ $item.name }})">
<image src="{{ $item.icon }}"></image>
<text>{{ $item.name }}</text>
</div>
</div>
</div>
</drawer>
</div>

结尾


每天进步一点点、需要付出努力亿点点。


项目地址 https://gitee.com/liangdidi/DrawerContainer (需要登录才能看到演示图)


更多原创内容请关注:开鸿 HarmonyOS 学院


入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,共建鸿蒙生态,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。


想了解更多关于鸿蒙的内容,请访问:


51CTO和华为官方战略合作共建的鸿蒙技术社区


https://harmonyos.51cto.com/#bkwz


::: hljs-center


21_9.jpg


:::

©著作权归作者所有:来自51CTO博客作者HarmonyOS技术社区的原创作品,如需转载,请注明出处,否则将追究法律责任
HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
https://blog.51cto.com/harmonyos/4693761

学习Java必备的基础知识06,要想学好必须扎实基本功(⭐建议收藏)#yyds干货盘点#-多极客编程

Day06-Java @[toc] 关于作者 • 作者介绍 🍓 博客主页:作者主页🍓 简介:JAVA领域优质创作者🥇、一名在校大三学生🎓、在校期间参加各种省赛、国赛,斩获一系列荣誉🏆。🍓 关注我:关注我学习资料、文档下载统统都有,每日定时更新文章,励志做一名JAVA资深程序猿👨‍💻。 String类 开发中String必用 任何一个类的文档由如下几个部分组成 类的相关定义,包括这个类的名字,有

#yyds干货盘点# 7. ✎会查新华字典不?会。Python字典已经掌握了-多极客编程

学编程要简单、粗暴。更要有效,很多时候学的越多,忘得越快。但编程总有那么一天顿悟的时候,而顿悟的契机目前就是建立在你跟橡皮擦坚持打卡 100 天,在评论区坚持跟橡皮擦卡学习的朋友,在 100 天之后,橡皮擦将送出 神秘大奖。 七、查字典怎么查,Python 字典就怎么用 已经学完了列表与元组,那这两个都是按照顺序排列的,所以可以用索引取到值,本篇博客要学习的是字典,由上文可知,字典肯定就是不能

【Pandas学习笔记02】处理数据实用操作-多极客编程

作者:幻好 来源:恒生LIGHT云社区 Pandas 是一个 Python 软件库,它提供了大量能使我们快速便捷地处理数据的函数和方法。在本文将主要介绍 Pandas 的实用数据处理操作。 系列文章: 【Pandas学习笔记01】强大的分析结构化数据的工具集 概述 Pandas 是基于 NumPy 构建的库,在数据处理方面可以把它理解为 NumPy 加强版,同时 Pandas 也是一项开源项目

花了30天才肝出来,史上最全面Java设计模式总结,看完再也不会忘-多极客编程

本文所有内容均节选自《设计模式就该这样学》 序言 Design Patterns: Elements of Reusable Object-Oriented Software(以下简称《设计模式》),一书由Erich Gamma、Richard Helm、Ralph Johnson和John Vlissides合著(Addison-Wesley,1995)。这四位作者常被称为“四人组(Gang

C语言(指针初阶)-多极客编程

指针的定义内存编号---地址---指针 指针是一个宏观的概念:包含指针(地址)与指针变量 指针是一个地址,指针变量是存放地址的一个变量(称之为变量的原因是:在指针变量中存放的地址是可以更改的) 在内存中一个地址大小为一个字节,但是指针大小是有4字节的,所以指针指向的是这个变量地址的首地址 一个指针变量指向的是某个地址,是16进制,其中8位数,但是0x11223344其中每两位代表一个字节(注:一个

[C语言] 字符串处理函数-多极客编程

字符串拷贝#define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>void my_strcpy1(char* src, char* dest){int i = 0;while (src[i]) {dest[i] = src[i];i++; }dest[i] = '\0';}void my_strcpy2(char* src, char*

HarmonyOS Sample 之 AI能力之NLU引擎服务-多极客编程

@toc HarmonyOS Sample 之 AI能力之NLU引擎服务 1.介绍 NLU(the natural language understanding)自然语言理解引擎服务。该引擎服务提供了 分词、词性标注、实体识别、意图识别、关键词提取等接口,有同步和异步两种方法。这一期的内容包括:分词能力、词性标注、关键字提取、实体识别。相关代码都增加了注释说明和调试日志,方便理解和学习。 2.效果

HarmonyOS 自定义组件之分页功能组件封装实例-多极客编程

本次实战课题是--自定义组件之分页功能实例 @toc 一、分页组件效果展示 ::: hljs-center ::: 二、分页组件设计流程 ::: hljs-center ::: 三、自定义组件封装必备知识点 1,何谓自定义组件 组件是对数据和方法的简单封装。个人对组件的通俗理解是:对单独的某个通用功能点或UI显示模块的封装。 2,组件框架搭建步骤 此处以js为例:第一步:在工程目录的commo

OpenHarmony 源码解析之安全子系统 (应用权限管理)-多极客编程

作者:周永峰 1 简介 安全子系统为OpenHarmony提供有效保护应用和用户数据的能力。 主要功能: 系统安全、数据安全、应用安全等; 目前开源功能: 应用完整性保护、应用权限管理、设备认证、密钥管理服务、数据分级保护; 应用权限管理: 为程序框架子系统提供权限管理功能,并且为上层应用提供权限申请和授权状态查询接口。 本文将介绍标准系统下安全子系统应用权限管理部分如何在系统内适配及实现,尽力深

手把手教你低代码开发鸿蒙应用UI-多极客编程

早些时候,应该都有听说过网页三剑客,是一套强大的网页编辑工具,最初是由美国的Macromedia公司开发出来的。由Dreamweaver,Fireworks,Flash三个软件组成,俗称网页三剑客。 Dreamweaver 是一个“所见即所得”的可视化网站开发工具,主要用于动态网页和静态网页的开发;Fireworks主要是用于对网页上常用的jpg、gif的制作和处理,也可用于制作网页布局;Fla

HDF驱动框架探路(二):openharmony最新源码,打通应用态到内核态-多极客编程

【本文正在参与优质创作者激励】老规矩还是将最终希望跑出来的效果放出来。如下: @toc 前言 1.首先本文章的源码是2021.11.25拉的openharmony的master分支。之前也有一些大神基于3516应用态打通到了内核态,不过都很久远了,尤其是3.0LTS发布之后,整个框架都改动过了,按照大神们的操作我这边基于最新的源码都没有测试成功。有大佬可以留言指导一拨儿。 2.本文章是基于Hi35

HarmonyOS ArkUI之列表下拉刷新、加载更多(TS)-多极客编程

作者:梁青松 简介 本项目界面搭建基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址: 基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2 本文介绍列表刷新: 下拉刷新 上拉加载更多 ArKUI系列文章 【HarmonyOS ArkUI之仿微信朋友圈图片预览】 【HarmonyOS ArkUI之仿微信图片选择】 【HarmonyOS ArkUI之自定义组件侧