HarmonyOS ArkUI之自定义组件侧滑菜单(JS) 原创 精华
中软HOS小鸿
发布于 2021-11-23 10:05
浏览
13收藏
作者:梁青松
前言
鸿蒙这次API7更新除了新增TS声明式开发之外,还有JS开发也增加了很多API,JS开发自定义组件越来越方便了。
本项目基于ArkUI中JS扩展的类Web开发范式,关于语法和概念直接看官网官方文档地址:
基于JS扩展的类Web开发范式1 基于JS扩展的类Web开发范式2
本文介绍最新出的插槽用法,实现侧滑菜单、支持两种风格、支持快速滑动打开关闭。
ArKUI系列文章
【HarmonyOS ArkUI之自定义组件侧滑菜单(JS)】
效果演示
风格一:内容页在菜单上面 | 风格二:内容页在菜单下面 |
---|---|
![]() |
![]() |
主要知识点
触摸事件、自定义组件父子组件传递参数、api=7新出的slot插槽
实现思路
自定义组件的逻辑都在此目录下:entry/js/default/pages/drawer
主要使用onTouch相关事件,滑动改变菜单布局或内容布局的left偏移量,手指抬起使用动画完成偏移量
1、onTouch相关事件
只贴出了关键代码
2、showStyle
-
0 第一种样式下,解决设置z-index之后菜单界面在内容下面,但点击事件却还在内容上面的问题。
-
初始化设置left偏移量
-
动画结束,判断菜单是否关闭,关闭直接设置菜单偏移量为负的菜单宽度
注意:目前使用插槽之后,预览器不走生命周期方法:onShow。
3、使用具名插槽封装
4、index页面使用
结尾
每天进步一点点、需要付出努力亿点点。
项目地址 https://gitee.com/liangdidi/DrawerContainer (需要登录才能看到演示图)
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,共建鸿蒙生态,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-23 10:18:41修改
赞
13
收藏 13
回复
13
5
13
相关推荐
先结合楼主的git代码测试一下,感谢楼主分享。
哈哈哈,可以关注我们,作者出了ArkUI系列文章,会持续更新。
有那味儿了
你这写的ArkUI,却是用js实现的,有ETS版的吗
很棒啊