用 Vue 添加左右滑动

Question

帮助客户建立一个几乎没有任何 JavaScript 知识但已经走到这一步的网站，现在正在寻找一种简单快速的代码添加，可以向 Hero 和 Hero-BG 标签添加左/右滑动功能

这是例子：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", {
  template: `
    <div>
      <topbar></topbar>
      <topbarmob></topbarmob>
      <hero-bg :selected="selectedItem.img"></hero-bg>
      <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

您可以尝试对 touchstart 和 touchend javascript 事件采取行动，并使用它们来确定用户滑动的方式。

所以...

<div @touchstart="touchStartMethod" @touchEndMethod="touchEndMethod"> ...</div>

...

    methods: {
           touchStartMethod (touchEvent) {
              console.log(touchEvent)
              // For example under changedTouches you'll see that clientX changes
              // So if it grows from start to finish you know it is swipe right
           },
           touchEndMethod (touchEvent) {...}        
     }

编辑

首先，我们要对我们想要滑动的 touchstart 事件采取行动（我假设它是带有 hero-container 类的 div）

<div class="hero-container" v-if="!gridEnabled" @touchstart="touchStart">...

然后，我们在“methods”中添加如下方法：

      touchStartMethod (touchEvent) {
        if (touchEvent.changedTouches.length !== 1) { // We only care if one finger is used
          return;
        }
        const posXStart = touchEvent.changedTouches[0].clientX;
        addEventListener('touchend', (touchEvent) => this.touchEnd(touchEvent, posXStart), {once: true});
      },
      touchEndMethod (touchEvent, posXStart) {
        if (touchEvent.changedTouches.length !== 1) { // We only care if one finger is used
          return;
        }
        const posXEnd = touchEvent.changedTouches[0].clientX;
        if (posXStart < posXEnd) {
          this.previous(); // swipe right
        } else if (posXStart > posXEnd) {
          this.next(); // swipe left
        }
      }

我将触摸结束部分更改为事件侦听器，该事件侦听器仅用于触摸结束事件，以防万一松开屏幕时手指在容器外。