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

vue 悬浮按钮组件_Vue悬浮球效果相关推荐

vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
android 悬浮按钮下载,简悬浮安卓版(android 悬浮按钮)V1.3.5 最新版
简悬浮安卓版(android 悬浮按钮)是专门为广大安卓用户开发的一款悬浮按钮应用.通过简悬浮APP,用户可以开启悬浮功能设置,然后就可以自定义手势栏功能,完成一键快速操作,提高使用效率.而且还能设置 ...
android悬浮窗组件,Android 悬浮窗，悬浮view功能实现
写在前面:本文仅个人开发时遇到的问题及个人解决办法的记录. 国内各个手机厂商对ROM魔改的比较严重,还没有做兼容性测试,所以碰到沙雕的机子的时候,请再去寻找适配方法最近项目开发中,需要实现一个悬浮窗 ...
vue 悬浮按钮组件_如何搭建和发布一个 Vue 组件库
如今,许多组件库风靡一时,使得我们能够便捷地保持一个应用一致的外观和体验. 我至今已经使用过许多不同的组件库,不过使用组件和深入了解构建组件的过程还是有很大不同的. 我想要更深入地理解组件库的构建过程 ...
android悬浮按钮组件
转载自博客园纯属浪费8818. 一个好玩的组件,FloatingActionButton, design包下的一个空间. 使用前需要添加依赖: compile 'com.android.suppor ...
ios添加全局悬浮按钮_iOS开发悬浮按钮
释放双眼,带上耳机,听听看~! #import "ViewController.h"@interface ViewController ()@property (weak, non ...
vue使用动态组件实现TAB切换效果
目录一.方法1:使用Vant组件库的tab组件二. 方法2:手动创建tab切换效果 2.在components文件夹下创建切换的.vue页面.引入使用 3.布局:上面放tab点击的标签,下面放组件 ...
android悬浮按钮列表,Android悬浮菜单按钮FloatingActionButton实现
[实例简介] Android悬浮菜单按钮FloatingActionButton实现,可直接拿到项目中集成使用.希望大家多多关注我的博客:https://blog.csdn.net/k57103983 ...
vue 循环递归组件_Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...

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

vue 悬浮按钮组件_Vue悬浮球效果相关推荐

最新文章

热门文章