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)】

效果演示

风格一：内容页在菜单上面风格二：内容页在菜单下面

主要知识点

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

实现思路

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

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

1、onTouch相关事件

只贴出了关键代码

1. /**
2. * 触摸按下
3. */
4. onTouchStart(event) {
5. // 记录首次按下的x坐标
6. this.pressX = event.touches[0].localX
7. // 记录上次的x坐标
8. this.lastX = this.pressX
9. .....
10. },
11. /**
12. * 触摸移动
13. */
14. onTouchMove(event) {
15. // 当前x坐标
16. let localX = event.touches[0].localX
17. // 计算与上次的x坐标的偏移量
18. let offsetX = this.lastX - localX;
19. // 记录上次的x坐标
20. this.lastX = localX
21. // 累计偏移量
22. this.offsetLeft -= offsetX
23.  
24. // 设置偏移量的范围
25. .....
26. }
27.  
28. **
29. * 触摸抬起
30. */
31. onTouchEnd(event) {
32.  
33. ......
34.  
35. // 手指抬起，根据情况，判断toX的值，也就是判断关闭或开启菜单的情况
36. // 当移动偏移量大于菜单一半宽度，完全打开菜单，否则反之
37. if (this.offsetLeft > this.menuWidth / 2) {
38. toX = this.menuWidth
39. } else {
40. toX = 0
41. }
42.  
43. ......
44.  
45. // 开启动画
46. this.startAnimator(toX)
47.  
48. }
49. /**
50. * 开启动画
51. */
52. startAnimator(toX) {
53. // 设置动画参数
54. let options = {
55. duration: ANIMATOR_DURATION, // 持续时长
56. fill: 'forwards', // 启停模式：保留在动画结束状态
57. begin: this.offsetLeft, // 起始值
58. end: toX // 结束值
59. };
60. // 更新动画参数
61. this.animator.update(options)
62. // 监听动画值变化事件
63. this.animator.onframe = (value) => {
64. this.offsetLeft = value
65. this.changeMenuOffsetLeft()
66. }
67. // 开启动画
68. this.animator.play()
69. },

2、showStyle

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

初始化设置left偏移量

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

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

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

3、使用具名插槽封装

1. "drawer-container" class="drawer-container" on:touchstart="onTouchStart"
2. on:touchmove="onTouchMove" on:touchend="onTouchEnd">
3.  
4. "drawer-content" style="left : {{ showStyle == 0 ? offsetLeft : 0 }} px;
5. z-index : {{ zIndexContent }};" on:click="closeMenu">
6.  
7. --具名插槽，根据名称加入对应的插槽中-->
8. name="content">
9.  
10.  
11.  
12. "drawer-menu" style="z-index : {{ zIndexMenu }};">
13. "drawer-menu-background" style="opacity : {{ menuBgOpacity }};">
14. left : {{ menuOffsetLeft }} px;" on:click="clickMenu">
15.  
16. --具名插槽，根据名称加入对应的插槽中-->
17. name="menu">
18.  
19.  
20.  
21.  
22.  

4、index页面使用

1. --引入自定义组件-->
2. name='drawer' src='../drawer/drawer.hml'>
3. "container">
4. --通过传值设置样式-->
5. "0">
6. --根据名称加入对应的插槽中-->
7. 'content' class="content-layout">
8. "title-bar">
9. 主页
10.  
11. "mainpage-content">
12. "content1">我是内容页面
13. "content2">V1.0.0
14. "content2">梁迪迪
15.  
16.  
17.  
18. 'menu' class="menu-layout">
19. "my-info">
20. "common/images/head_photo.png">
21. 登录 | 注册
22.  
23. "menu-content">
24. for="{{ listMenu }}" tid="{{ $item.id }}" on:click="menuSkip({{ $item.name }})">
25. "{{ $item.icon }}">
26. {{ $item.name }}
27.  
28.  
29.  
30.  
31.  

结尾

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

原文链接：https://harmonyos.51cto.com