# DrawerContainer

**Repository Path**: chinasoft6_ohos/DrawerContainer

## Basic Information

- **Project Name**: DrawerContainer
- **Description**: 鸿蒙JS-侧滑菜单
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-09-04
- **Last Updated**: 2022-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 鸿蒙JS

## README

#  侧滑菜单



#### 项目介绍

- 项目名称：侧滑菜单（两种风格）
- 所属系列：OpenHarmony下的的JS容器组件开发
- 开发版本：sdk6，DevEco Studio2.2 Beta1
- 项目作者和维护人：梁青松
- 邮箱：775290428@qq.com

#### 效果演示

![](gif/demo.gif)
![](gif/demo1.gif)


#### 项目目录

页面和逻辑都在此目录下：entry/js/default/pages/drawer

#### 实现思路

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

1、onTouch相关事件（只贴出了关键代码）

```js
    /**
     * 触摸按下
     */
    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偏移量
- 动画结束，判断菜单是否关闭，关闭直接设置菜单偏移量为负的菜单宽度

```js
    /**
     * 界面显示
     */
    onShow() {
        .....
    	// 设置菜单偏移量为负的菜单宽度，为了解决z-index设置后，菜单界面到内容下面，
        // 事件还停留到内容上面，导致点击菜单区域，响应的还是菜单点击事件
        this.menuOffsetLeft = -this.menuWidth
    }
```



#### 使用说明

在sdk6，DevEco Studio2.2 Beta1下项目可直接运行，如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

1、因为我的是容器组件，在drawer.hml文件下，写入对应的布局样式

```html
<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">

    <!--内容布局开始-->

        <!--写入内容布局-->

    <!--内容布局结束-->
        
    </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">

        <!--菜单布局开始-->

            <!--写入菜单布局-->

        <!--菜单布局结束-->

        </div>
    </stack>

</div>

```

2、更改样式，更改js中showStyle的值

```js
export default {
    data: {
        ....
        showStyle: 0, // 显示样式：0菜单在下面，1菜单在上面
    }
}
```



#### 代码参考

https://gitee.com/chinasoft6_ohos/DrawerContainer.git

##  更多原创内容请关注：[开鸿 HarmonyOS 学院](https://harmonyos.51cto.com/column/59) 
入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。