vue 移动到图片浮动_Vue实现浮动按钮组件 – 页面滚动时自动隐藏 – 可拖拽

效果图

说明

本文可能有点啰嗦了…

组件难点

如何监听滚动完成事件

移动端如何监听拖拽事件

前置条件

为了充分发挥vue的特性，我们不应该通过ref来直接操作dom，而是应该通过修改数据项从而让vue自动更新dom。因此，我们这样编写template。

{ {text}}

当然.ys-float-btn肯定是position:fixed的，其他的样式很简单，大家自由发挥。

初始化位置

首次进入页面时，按钮应该处于一个初始位置。我们在created钩子中进行初始化。

created(){

this.left = document.documentElement.clientWidth - 50;

this.top = document.documentElement.clientHeight*0.8;

},

监听滚动

为了能够让这个浮动按钮能够在页面滚动时隐藏，第一步要做的就是监听页面滚动事件。

mounted(){

window.addEventListener('scroll', this.handleScrollStart);

},

methods:{

handleScrollStart(){

this.left = document.documentElement.clientWidth - 25;

}

}

嗯，别忘了取消注册。

beforeDestroy(){

window.removeEventListener('scroll', this.handleScrollStart);

},

这样就能够让组件在页面滚动时往右再移动25像素的距离。

but！我还没有写动画诶…

过渡动画

嗯，我当然不会使用js写动画了，我们在css类.ys-float-btn中加上transition: all 0.3s; 过渡动画就搞定了。

滚动什么时候完成呢？

监听到scroll事件只是第一步，那么什么时候scroll事件才会停止呢？浏览器并没有为我们准备这样一个事件，我们需要手动去实现它。思路其实也很简单，当一个时间周期内页面的scrollTop不变就说明页面滚动停止了。

所以我们需要在data函数里返回一个timer对象，用来存储我们的定时器。像这样：

data(){

return{

timer:null,

currentTop:0

}

}

改造一下handleScrollStart方法。

触发scroll的时候清掉当前的计时器(如果存在)，并重新计时

handleScrollStart(){

this.timer&&clearTimeout(this.timer);

this.timer = setTimeout(()=>{

this.handleScrollEnd();

},300);

this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;

this.left = document.documentElement.clientWidth - 25;

},

现在增加了一个回调handleScrollEnd方法

handleScrollEnd(){

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

if(scrollTop === this.current