标签：startX vue return direction h5 startY let changedTouches 页面

<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>

标签：startX,vue,return,direction,h5,startY,let,changedTouches,页面
来源： https://www.cnblogs.com/turkey-Rabbit/p/16469553.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。