为什么要做这个

翻阅了文档,发现并没有拖拽组件,根据IOS的拖拽按钮产生了想法于是乎就自己想着实现一个

演示效果

开发环境

1. openHarmary和HarmaryOS语法几乎保持一致
2. SDk6
3. 开发工具:DevEcoStudio2.2 beta2

功能

1.悬浮按钮拖拽，手指松开贴边
2.点击悬浮按钮显示工具栏
3.工具栏可以根据参数以window为基准左中右对齐，也可以悬浮按钮为基准点，上下对齐

思路解析

首先需要在手指触摸的时候,手指滑动的时候分别获取到其坐标点,根据他们的差值,计算出悬浮按钮拖拽的距离.

1. 在手指触摸时候

1.1. 需要获取到元素距离屏幕左侧(offsetLeft)&上侧的距离(offsetTop);

1.2. 获取到手指触摸元素的坐标点（x,y）

2. 在手指滑动的时候

2.1. 在滑动的时候，实时获取到滑动的坐标点（x,y）；

2.2. 计算元素的left值和top值，公式如下：

• left = 滑动时的x值 - （触摸时的x值-元素的offsetLeft）

• top = 滑动时的y值 - （触摸时的y值-元素的offsetTop）

3. 最大最小边界值计算

3. 最大边界值不能大于屏幕宽高；最小边界值不能小于0；

• 最left小边界值=left小于0；就让他等于0；
• 最小top边界值=top小于0；就让他等于0；
• 最大left边界值=屏幕宽度-元素自身宽度
• 最大top边界值=屏幕高度-元素自身高度
  

4. 贴边吸附效果
   贴边计算公式：(屏幕宽度-元素宽度) /2;
   4.1 如果滑动的left值大于屏幕宽度的一半，就贴边到右侧;
   此时left=屏幕宽度-元素宽度
   4.2 如果滑动的left值小于于屏幕宽度的一半，就贴边到左侧；此时left赋值零;
   注意：此处的left指的是2.2下的left
   

5. 贴边后长时间不操作，使其透明化

5.1 手指离两秒开后，使其透明化；当手指手指触摸时候，使其不透明化

• JS
  
• hml
  
• css
  

6. 工具栏

** 以window视图为基线，偏左，偏右，居中显示的时候， 始终垂直居中，计算公式：
** top = （window窗口高度 – 工具栏高-工具栏上下边距）/ 2
6.1 工具栏靠window左边显示（以window视图为基线）
偏左显示的时候，left直接设置为0即可
6.2 工具栏靠window右边显示（以window视图为基线）
偏右显示的时候，需要计算left的偏移量的值
left计算公式：window窗口宽度 -工具栏宽度 - 工具栏左右边距
6.3 工具栏以window中心显示（以window视图为基线）
居中显示的时候，此时工具栏水平垂直居中
计算公式：（window窗口宽度 -工具栏宽度 - 工具栏左右边距）/ 2

工具栏以window视图为基线显示,代码截图

6.4 工具栏显示在上方（以fab悬浮按钮为基线）
获取悬浮按钮的距离顶部距离 和 工具栏高度，用来判断悬浮按钮顶部偏移距离是否小于工具栏高度；
获取悬浮按钮的距离顶部距离 小于 悬浮按钮高度，悬浮按钮top偏移量就向下方挪动
a悬浮按钮top偏移量计算公式：工具栏高度+20;
加了20 是让工具栏和悬浮按钮有距离
工具栏top偏移量计算公式：悬浮按钮顶部top – 工具栏高度
这个时候悬浮按钮顶部top值在 a 里面重新计算了
6.5 工具栏显示在下方（以fab悬浮按钮为基线）
获取悬浮按钮的距离底部距离 和 工具栏高度，用来判断悬浮按钮底部偏移距离是否小于工具栏高度；
判断条件：悬浮按钮距离底部偏移量 是否大于 window视图高度-工具栏高度
如果大于重新计算悬浮按钮偏移量 和 工具栏偏移量
悬浮按钮偏移量公式：window视图高度 – 工具栏高度 – 20
减了20 是让工具栏和悬浮按钮有距离
工具栏偏移量公式： window视图高度 – 工具栏高度

** 工具栏以fab悬浮按钮为基线显示代码截图

做这个过程中的痛点

1. 在hml中,标签元素绑定判断语句,无法使用表达式,最后无奈,只能在JS逻辑内将表达式结果返回做判断
2. 当设置了在标签元素的css属性display:flex, 使用{{show}}或者{{if}}的时候,发现并不会起到什么作用
3. JS获取标签元素的大小及其窗口位置的时候,发现在onInit中并不起作用,使用定时器延时有感觉会增加性能问题,于是在组件生命周期onLayoutReady中获取

源码地址:https://gitee.com/queling/fab-button

作者:田帅