作者:梁青松

前言

鸿蒙这次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

:::