Vue悬浮球效果

本文主要是介绍Vue悬浮球效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

知识点：

悬浮球有两个知识点：

1）一个是吸边效果。位置判断，然后缓动到目标位置：

获取元素位置属性：this.$refs.refNamexxxx.getBoundingClientRect()

2）一个是页面滚动过程中隐藏悬浮球的防抖。

实现思路：

1、created里获取document.documentElement.clientWidth和clientHeight，（这里插入知识点document.documentElement和document.body的差别）

2、mounted里设置初始位置，并绑定悬浮球的touchstart touchmove touchend以及window.scroll事件

3、touchstart里设置禁止点击以免touch和click事件冲突，同时让transition为none因为跟随手指移动时不需要缓动效果。

4、touchmove中设置悬浮球跟随手指拖动实时改变位置，并且在这里可以设置悬浮球回复可点击。

5、touchend里首先判断悬浮球是否可点击，如上所说以免touch和click事件冲突。然后把transition改为all 0.3s，为了停止拖动后吸边动作的缓动效果。最后就是做吸边动作，将悬浮球的left top设置为目标位置。

6、页面scroll过程中，悬浮球隐藏操作，是在scroll里隐藏悬浮球，然后scroll里做一个防抖，等scroll停下来200ms后执行悬浮球回复显示。

7、最后很重要的是，别忘记在 beforeDestroy里removeEventListener，做一个有始有终良好习惯的程序员。

reference

segmentfault.com/a/119000002…

blog.csdn.net/qq_41009742…

blog.csdn.net/weixin_4349…

www.cnblogs.com/richard1015…

juejin.im/post/5c237c…

github.com/5ibinbin/vu…

github.com/vencent2017…

github.com/system-cpu/…

这篇关于Vue悬浮球效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！