2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > vue 悬浮按钮组件_Vue悬浮球效果

vue 悬浮按钮组件_Vue悬浮球效果

时间:2019-08-14 20:58:56

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。