Knowledge:
There are two things about levitating balls:
1) One is the effect of absorbing edges. Position judgment, and then slow to the target position:
For element location attribute: this. $refs. RefNamexxxx. GetBoundingClientRect ()
2) One is to hide the floating ball in the process of page scrolling.
Implementation idea:
1, take the document created. DocumentElement. ClientWidth and clientHeight, (insert knowledge document here. The documentElement and document. The difference of the body)
Mounted set the initial position of the floating ball and bind the TouchStart, TouchMove, TouchEnd and window.scroll events
3. In touchStart, disable clicking so that touch and click events don’t collide, and make Transition None because you don’t need to slow down when you follow your finger.
4. Set the floating ball to change its position in real time by dragging the finger in TouchMove, and set the floating ball to reply and click here.
5. In touchend, first judge whether the floating ball is clickable, so as to avoid touch and click events conflict. Then change transition to all 0.3s to stop dragging. Finally, the left top of the floating ball is set as the target position.
6. In the process of page scroll, the operation of floating ball hiding is to hide the floating ball in the scroll, and then make an anti-shake in the Scroll, and perform the display of floating ball after the scroll stops for 200ms.
7. Finally and importantly, don’t forget to removeEventListener in beforeDestroy to be a good programmer with a good habit of finishing what you start.
reference
Segmentfault.com/a/119000002…
Blog.csdn.net/qq_41009742…
Blog.csdn.net/weixin_4349…
www.cnblogs.com/richard1015…
Juejin. Cn/post / 684490…
Github.com/5ibinbin/vu…
Github.com/vencent2017…
Github.com/system-cpu/…