效果图
说明
本文可能有点啰嗦了…
组件难点
如何监听滚动完成事件
移动端如何监听拖拽事件
前置条件
为了充分发挥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