黑马程序员技术交流社区

标题: 【西安校区】Vue悬浮球效果 [打印本页]

---

作者: 逆风TO    时间: 2020-4-29 10:08
标题: 【西安校区】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，做一个有始有终良好习惯的程序员。




转载自链接：https://juejin.im/post/5ea7c1cc6fb9a043356796f6

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2