javascript - 添加一个简单的左/右滑动手势

Question

我需要添加一个简单的左/右滑动手势 这样在移动设备上滑动时“选定”图像会循环，类似于单击 hero 组件中的按钮，也类似于按键盘上的左/右箭头键
我在 JavaScript 方面没有最丰富的经验，所以如果有人能告诉我具体要写什么以及在哪里写，那么我可以完全结束这个项目。
这是一个演示:http://nufaith.ca/justinatkins/
代码:

Vue.component('hero-bg', {
  template: `
    <div class="hero-bg">
      <div class="hero">
        <img id="pushed" :src="selected"/>
      </div>
    </div>
    `,
  props: ['selected']
});

Vue.component('hero-bg-empty', {
  template: `
    <div class="hero-bg">
      <div class="hero">
      <span style="display:block;height:100px;"></span>
      </div>
    </div>
    `
});

Vue.component('hero', {
  template: `
    <div>
      <topbar v-if="!gridEnabled"></topbar>
      <topbar2 v-if="gridEnabled"></topbar2>
      <hero-bg :selected="selectedItem.img" v-if="!gridEnabled"></hero-bg>
      <hero-bg-empty v-if="gridEnabled"></hero-bg-empty>
      <div class="hero-container" v-if="!gridEnabled">
        <div class="hero">
          <img :src="selectedItem.img" v-if="thing" alt=""/>
        </div>

        <div class="hero-desc">
          <button class="control left" @click="previous">
            <i class="zmdi zmdi-chevron-left"></i>
          </button>
          <span class="hero-desc-title" v-html="title"></span>
          <button class="control right" @click="next">
            <i class="zmdi zmdi-chevron-right"></i>
          </button>
          <br/>
          <button class="view-all-button" @click="enableGrid">OVERVIEW</button>
        </div>
      </div>
    </div>
    `,
  data() {
    return {
      gridEnabled: false,
      selected: 0,
      thing: true
    };
  },
  computed: {
    selectedItem() {
      return info[this.selected];
    },
    title() {
      const comma = this.selectedItem.title.indexOf(',');
      const len = this.selectedItem.title.length;
      const strBeginning = this.selectedItem.title.substring(comma, 0);
      const strEnd = this.selectedItem.title.substring(comma, len);
      if (this.selectedItem.title.includes(',')) {
        return `<span>${strBeginning}<span class="font-regular font-muted">${strEnd}</span></span>`;
      }
      return this.selectedItem.title;
    },
    maxImages() {
      return info.length - 1;
    }
  },
  created() {
    window.addEventListener('keydown', e => {
      if (e.keyCode === 37) {
        this.previous();
        return;
      }

      if (e.keyCode === 39) {
        this.next();
        return;
      }
    });
    Event.$on('updateImg', index => {
      this.selected = index;
      this.gridEnabled = !this.gridEnabled;
    });
  },
  methods: {
    next() {
      this.selected === this.maxImages ? (this.selected = 0) : (this.selected += 1);
    },
    previous() {
      this.selected === 0 ? (this.selected = this.maxImages) : (this.selected -= 1);
    },
    enableGrid() {
      this.gridEnabled = !this.gridEnabled;
      window.scroll(0, 0);
      Event.$emit('enableGrid');
    }
  }
});

Answer 1

这就是我实现 的方式一个简单的滑动手势在我的一个项目中。你可以看看这个。
代码:

touchableElement.addEventListener('touchstart', function (event) {
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
}, false);

touchableElement.addEventListener('touchend', function (event) {
    touchendX = event.changedTouches[0].screenX;
    touchendY = event.changedTouches[0].screenY;
    handleGesture();
}, false);


function handleGesture() {
    if (touchendX < touchstartX) {
        console.log('Swiped Left');
    }

    if (touchendX > touchstartX) {
        console.log('Swiped Right');
    }

    if (touchendY < touchstartY) {
        console.log('Swiped Up');
    }

    if (touchendY > touchstartY) {
        console.log('Swiped Down');
    }

    if (touchendY === touchstartY) {
        console.log('Tap');
    }
}

基本上， touchableElement这里提到的，指的是 DOM Element将接收触摸事件。如果您想在整个屏幕上激活滑动选项，那么您可以使用您的 body标记为可触摸元素。或者您可以配置任何特定的 div元素作为可触摸元素，以防您只想在该特定 div 上使用滑动手势.
在那 touchableElement ，我们在这里添加 2 个事件监听器:

touchstart :
这是用户 开始刷卡 .我们采用初始坐标 (x,y) 和
将它们分别存储到 touchstartX、touchstartY 中。

touchend : 这是当用户 停止刷卡 .我们获取最终坐标 (x, y) 并将它们分别存储到 touchendX 和 touchendY 中。

请记住，这些坐标的原点是屏幕的左上角。 x坐标增加当您从 出发时从左到右 和 y坐标增加当您从 出发时从上到下 .
然后，在 handleGesture() ，我们只比较这 2 对坐标 (touchstartX, touchstartY) 和 (touchendX, touchendY)，以检测不同类型的滑动手势(上、下、左、右):

touchendX < touchstartX :说，用户开始 扫一扫 更高的 X 值 & 停止扫一扫 下 X 值 .这意味着，刷卡从右到左 (向左滑动)。

touchendX > touchstartX :说，用户开始 扫一扫 下 X 值 & 停止扫一扫 更高的 X 值 .这意味着，刷卡从左到右 (向右滑动)。

touchendY < touchstartY :说，用户开始 扫一扫 更高的 Y 值 & 停止扫一扫 下 Y 值 .这意味着，刷卡从下到上 (向上滑动)。

touchendY > touchstartY :说，用户开始 扫一扫 下 Y 值 & 停止扫一扫 更高的 Y 值 .这意味着，刷卡从上到下 (向下滑动)。

您可以在相应的 if 上添加这 4 个不同事件的代码(向上/向下/向左/向右滑动)。 block ，如代码所示。