当前位置: 首页 > 科技观察

HarmonyOSArkUI的自定义组件侧滑菜单(JS)

时间:2023-03-14 15:25:03 科技观察

更多内容请访问: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">

4.使用主页我是内容页V1.0.0两滴滴登录|注册{{$item.name}}最后,每天进步一点点,和我需要付出很多努力,我想了解更多更多信息请访问:https://harmonyos.51cto.com,与华为合作搭建的鸿蒙技术社区