vue h5页面左右滑动组件

<template>
  <div @touchstart="handelTouchStart" @touchend="handelTouchend" class="newbox">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: 0,
      startX: 0,
      startY: 0,
    };
  },
  created() {},
  methods: {
    handelTouchStart(e) {
      this.startTime = Date.now();
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
    },
    handelTouchend(e) {
      let endTime = Date.now();
      let endX = e.changedTouches[0].clientX;
      let endY = e.changedTouches[0].clientY;
      if (endTime - this.startTime > 2000) {
        //正常操作不会大于2秒
        return;
      }
      let direction = "";
      //如果Y轴移动小于10,证明是上下滑动,所以不做处理
      if (Math.abs(endX - this.startX) > 40 && Math.abs(endY - this.startY) < 50) {
        direction = endX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }
      this.$emit("handle", direction);
    },
  },
};
</script>

<style lang="less" scoped></style>