HarmonyOS-自定义组件的Slider滑块

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言最近发表学习相关熟悉HarmonyOS开发，滑块组件在项目开发过程中很有用。本文主要结合HarmonyOS官网的相关组件和通用API实现一个滑块组件。效果演示实现原理1.触发条件是基于HarmonyOS公共事件touchstart和touchmove，分别在手指刚触摸到屏幕和手指触摸到屏幕后移动时触发。2.实现滑块效果。通过touches触摸事件的属性集合返回屏幕触摸点的信息数组，获取被触摸组件左上角的localX距离，动态计算子元素的宽度，实现slider滑块效果。3、实现百分比显示通过HarmonyOS通用方法getBoundingClientRect()获取元素自身的宽度；通过滑动距离去除元素本身的宽度，实现滑块移动的百分比。使用的官方API通用方法getBoundingClientRect()获取元素的大小及其相对于窗口的位置。属性类型widthnumber描述了元素的宽度。heightnumber元素的高度。leftnumber元素左边框距窗口的偏移量。topnumber元素上边框距窗口的偏移量。通用事件名称参数描述是否支持冒泡touchstartTouchEvent手指刚接触屏幕时触发该事件。是5+touchmoveTouchEvent当手指触摸屏幕后移动时触发该事件。它是touchesArray触摸事件的5+属性类型的集合，包括触摸点在屏幕上的信息数组。属性类型描述globalXnumber距屏幕左上角（不包括状态栏）的水平距离。屏幕的左上角是原点。globalYnumber是距离屏幕左上角（不包括状态栏）的垂直距离。屏幕的左上角是原点。localXnumber是距离被触摸组件左上角的水平距离。组件的左上角是原点。localYnumber是距离被触摸组件左上角的垂直距离。组件的左上角是原点。实现过程hml部分：{{progress}}%