vue 实现微信浮标效果

微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。

我们今天打算撸一个类似微信的浮标组件，我们期望组件有以下功能

支持拖拽
支持左右吸附
支持页面上下滑动时隐藏

效果预览

拖拽事件

浮标的核心功能的就是拖拽，对鼠标或移动端的触摸的事件来说，有三个阶段，鼠标或手指接触到元素时，鼠标或手指在移动的过程，鼠标或手指离开元素。这个三个阶段对应的事件名称如下：

mouse: {
  start: 'mousedown',
  move: 'mousemove',
  stop: 'mouseup'
},
touch: {
  start: 'touchstart',
  move: 'touchmove',
  stop: 'touchend'
}

元素定位

滑动容器我们采用绝对定位，通过设置 top 和 left 属性来改变元素的位置，那我们怎么获取到新的 top 和 left 呢？

我们先看下面这张图

黄色区域是拖拽的元素，蓝色的点就是鼠标或手指触摸的位置，在元素移动的过程中，这些值也会随着发生改变，那么我们只要计算出新的触摸位置和最初触摸位置的横坐标和竖坐标的变化，就可以算出移动后的 top left ，因为拖拽的元素不随着页面滚动而变化，所以我们采用 pageX pageY 这两个值。用公式简单描述就是;

newTop = initTop + (currentPageY - initPageY)
newLeft = initLeft + (currentPageX - initPageX)

拖拽区域

拖拽区域默认是在拖拽元素的父级元素内，所以我们需要计算出父级元素的宽高。这里有一点需要注意，如果父级的宽高是由异步事件来改变的，那么获取的时候就会不准确，这种情况就需要改变下布局。

private getParentSize() {
  const style = window.getComputedStyle(
    this.$el.parentNode as Element,
    null
  );

  return [
    parseInt(style.getPropertyValue('width'), 10),
    parseInt(style.getPropertyValue('height'), 10)
  ];

}

拖拽的前中后

有了上面的基础，我们分析下拖拽的三个阶段我们需要做哪些工作

触摸元素，即开始拖拽，将当前元素的 top left 和触摸点的 pageX pageY 用对象存储起来，然后监听移动和结束事件
元素拖拽过程，计算当前的 pageX pageY 与初始的 pageX pageY 的差值，算出当前的 top left ，更新元素的位置
拖拽结束，重置初始值

左右吸附

在手指离开后，若元素偏向某一侧，便吸附在该侧的边上，那么在拖拽事件结束后，根据元素的X轴中心的与父级元素的X轴中心点做比较，就可知道往左还是往右移动

页面上下滑动时隐藏

使用 watch 监听父级容器的滑动事件，获取 scrollTop ，当 scrollTop 的值不在发生变化的时候，就说明页面滑动结束了，在变化前和结束时设置 left 即可。

若无法监听父级容器滑动事件，那么可以将监听事件放到外层组件，将 scrollTop 传入拖拽组件也是可以的。

代码实现

组件用的是 ts 写的，代码略长，大伙可以先收藏在看

// draggable.vue



.dra {
  touch-action: none;
}
.dra-tran {
  transition: top .2s ease-out , left .2s ease-out;
}

// dom.ts
export default {
  addEvent(el: any, event: string, handler: any) {
    if (!el) {
      return;
    }
    if (el.attachEvent) {
      el.attachEvent('on' + event, handler);
    } else if (el.addEventListener) {
      el.addEventListener(event, handler, true);
    } else {
      el['on' + event] = handler;
    }
  },
  removeEvent(el: any, event: string, handler: any) {
    if (!el) {
      return;
    }
    if (el.detachEvent) {
      el.detachEvent('on' + event, handler);
    } else if (el.removeEventListener) {
      el.removeEventListener(event, handler, true);
    } else {
      el['on' + event] = null;
    }
  }

};

总结

以上所述是小编给大家介绍的vue 实现微信浮标效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue 实现微信浮标效果

JavaScript相关栏目本月热门文章