更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com前言本次鸿蒙API7更新除了新的TS声明之外开发方面，也加入了很多JS开发的API，使得用JS开发自定义组件越来越方便。本项目基于ArkUI中JS扩展的类Web开发范式。语法和概念参考官网官方文档地址：JS-basedWeb-likedevelopmentparadigm1BasedonJSextension-basedWeb-likedevelopmentparadigm2本文介绍最新的slot用法，实现侧滑菜单，支持两种风格，支持快速滑动打开和关闭。ArKUI系列文章【HarmonyOSArkUI仿微信朋友圈图片预览】【HarmonyOSArkUI仿微信图片选择】【HarmonyOSArkUI自定义组件侧滑菜单（JS）】效果演示样式一：内容页在菜单样式2：内容页在菜单下。主要知识点触摸事件，自定义组件父子组件传递参数，api=7newslot插槽实现思路。自定义组件的逻辑都在这个目录下：entry/js/default/pages/drawer主要使用onTouch相关事件，滑动改变菜单布局或内容布局的左偏移，抬起手指用动画完成偏移1、onTouch相关事件只贴按键代码/***touchpressed*/onTouchStart(event){//记录第一次按下的x坐标this.pressX=event.touches[0].localX//记录第一次按下的x坐标lastx坐标this.lastX=this.pressX.......},/***Touchmovement*/onTouchMove(event){//当前x坐标letlocalX=event.touches[0].localX//计算offsetfromlastx坐标letoffsetX=this.lastX-localX;//记录最后一次x坐标this.lastX=localX//累计偏移this.offsetLeft-=offsetX//设置偏移范围.....}***touchlift*/onTouchEnd(event){......//抬起手指，根据情况判断toX的值，即判断是关闭还是打开菜单//当移动偏移量大于宽度的一半th的菜单，完全打开菜单，否则if(this.offsetLeft>this.menuWidth/2){toX=this.menuWidth}else{toX=0}......//开始动画this.startAnimator(toX)}/***开始动画*/startAnimator(toX){//设置动画参数letoptions={duration:ANIMATOR_DURATION,//Durationfill:'forwards',//启停模式：保持在结束animationbegin:this.offsetLeft,//起始值end:toX//结束值};//更新动画参数this.animator.update(options)//监听动画值变化事件this.animator.onframe=(value)=>{this.offsetLeft=valuethis.changeMenuOffsetLeft()}//开始动画this.animator.play()},2、在showStyle0的第一个样式中，解决设置z-index后菜单界面在内容下方，但点击事件仍然在内容上方的问题。初始化并设置左偏移量。动画结束，判断菜单是否关闭，关闭直接设置菜单偏置负菜单宽度注：当前使用槽后，预览器不走生命周期方法：onShow。exportdefault{//使用外部传入props:['showStyle'],//显示样式：0菜单在下方，1菜单在上方...}***界面显示*/onShow(){.....//设置具有负菜单偏移量的菜单宽度。为了解决z-index的设置，菜单界面在内容下方，//事件仍然停留在内容上，导致点击菜单区域，响应仍然是菜单点击事件this.menuOffsetLeft=-this。menuWidth}3.使用命名插槽包-content"style="left:{{showStyle==0?offsetLeft:0}}px;z-index:{{zIndexContent}};"on:click="closeMenu">
