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

Question

我需要添加一个简单的左/右滑动手势，以便“选定”图像在移动设备上滑动时循环，类似于单击英雄组件中的按钮，也类似于按键盘上的左/右箭头键

我对 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 个事件侦听器：

1. touchstart：这是用户开始滑动的时候。我们获取初始坐标 (x,y) 并将它们分别存储到 touchstartX 和 touchstartY 中。
2. touchend：这是用户停止滑动的时候。我们取最终坐标 (x, y) 并将它们分别存储到 touchendX, touchendY 中。

请记住，这些坐标的原点是屏幕的左上角。x 坐标随着您从左到右而增加，而y 坐标随着您从上到下而增加。

然后，在 中handleGesture()，我们只比较这 2 对坐标 (touchstartX, touchstartY) 和 (touchendX, touchendY)，以检测不同类型的滑动手势（向上、向下、向左、向右）：

• touchendX < touchstartX：说，用户开始在刷卡更高的X值与停在刷卡较低的X值。这意味着，从右向左滑动（Swiped Left）。

• touchendX > touchstartX：说，用户开始在刷卡较低的X值与停在刷卡更高的X值。这意味着，从左向右滑动（Swiped Right）。

• touchendY < touchstartY：说，用户开始在刷卡更高的Y值及停止在刷卡较低的Y值。这意味着，从底部向上滑动（向上滑动）。

• touchendY > touchstartY：说，用户开始在刷卡较低的Y值及停止在刷卡更高的Y值。这意味着，从上到下滑动（向下滑动）。

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

Answer 2

我采用了 smmehrab\xe2\x80\x99s 答案，添加了一些阈值以避免意外滑动，并将其变成了一个小库。可能会派上用场，所以这里是：

\n

export default class TouchEvent {\n    static SWIPE_THRESHOLD = 50; // Minimum difference in pixels at which a swipe gesture is detected\n\n    static SWIPE_LEFT   = 1;\n    static SWIPE_RIGHT  = 2;\n    static SWIPE_UP     = 3;\n    static SWIPE_DOWN   = 4;\n\n    constructor(startEvent, endEvent) {\n        this.startEvent = startEvent;\n        this.endEvent = endEvent || null;\n    }\n\n    isSwipeLeft() {\n        return this.getSwipeDirection() == TouchEvent.SWIPE_LEFT;\n    }\n\n    isSwipeRight() {\n        return this.getSwipeDirection() == TouchEvent.SWIPE_RIGHT;\n    }\n\n    isSwipeUp() {\n        return this.getSwipeDirection() == TouchEvent.SWIPE_UP;\n    }\n\n    isSwipeDown() {\n        return this.getSwipeDirection() == TouchEvent.SWIPE_DOWN;\n    }\n\n    getSwipeDirection() {\n        if (!this.startEvent.changedTouches || !this.endEvent.changedTouches) {\n            return null;\n        }\n\n        let start = this.startEvent.changedTouches[0];\n        let end = this.endEvent.changedTouches[0];\n\n        if (!start || !end) {\n            return null;\n        }\n\n        let horizontalDifference = start.screenX - end.screenX;\n        let verticalDifference = start.screenY - end.screenY;\n\n        // Horizontal difference dominates\n        if (Math.abs(horizontalDifference) > Math.abs(verticalDifference)) {\n            if (horizontalDifference >= TouchEvent.SWIPE_THRESHOLD) {\n                return TouchEvent.SWIPE_LEFT;\n            } else if (horizontalDifference <= -TouchEvent.SWIPE_THRESHOLD) {\n                return TouchEvent.SWIPE_RIGHT;\n            }\n\n        // Vertical or no difference dominates\n        } else {\n            if (verticalDifference >= TouchEvent.SWIPE_THRESHOLD) {\n                return TouchEvent.SWIPE_UP;\n            } else if (verticalDifference <= -TouchEvent.SWIPE_THRESHOLD) {\n                return TouchEvent.SWIPE_DOWN;\n            }\n        }\n\n        return null;\n    }\n\n    setEndEvent(endEvent) {\n        this.endEvent = endEvent;\n    }\n}\n

\n

如何使用

\n

touchstart只需向其提供来自和 的事件touchend：

\n

import TouchEvent from \'@/TouchEvent\'\n\nlet touchEvent = null;\n\ndocument.addEventListener(\'touchstart\', (event) => {\n    touchEvent = new TouchEvent(event);\n});\n\ndocument.addEventListener(\'touchend\', handleSwipe);\n\nfunction handleSwipe(event) {\n    if (!touchEvent) {\n         return;\n    }\n\n    touchEvent.setEndEvent(event);\n\n    if (touchEvent.isSwipeRight()) {\n        // Do something\n    } else if (touchEvent.isSwipeLeft()) {\n        // Do something different\n    }\n\n    // Reset event for next touch\n    touchEvent = null;\n}\n

\n

Answer 3

这听起来像是Hammer.JS的工作，除非您试图避免依赖性。他们有很好的文档和入门示例

我的 Vue 知识几乎一无所知，所以我很担心这会成为盲人引导盲人的场景，但你要做的第一件事是使用 npm 或 YARN 添加依赖项 - 然后将其添加到顶部你的文件使用

import Hammer from 'hammerjs'

尝试在此行上方添加以下代码：Event.$on('updateImg', index => {

const swipeableEl = document.getElementsByClassName('.hero')[0];
this.hammer = Hammer(swipeableEl)
this.hammer.on('swipeleft', () => this.next())
this.hammer.on('swiperight', () => this.previous())

如果它不起作用，您必须检查开发人员工具/控制台日志以查看是否记录了任何有用的错误。

这个codepen也可能是一个有用的资源：

祝你好运。