使用 Vue 添加左右滑动

Question

helping a client with a website with barely any JavaScript knowledge but have come this far and now looking for a simple and quick code addition that can add left/right swipe functions to the Hero and Hero-BG tags

this is the example: http://nufaith.ca/justinatkins

so whenever the user swipes left or right both the main hero image and the blurred hero image above it will both scroll to the next image much the same as clicking the chevrons or pressing arrow keys on a keyboard

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

You could try to act on the touchstart and touchend javascript events and use them to determine which way the user swipes.

So...

<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) {...}        
     }

Edit

First, we want to act on the touchstart event where we want to swipe( I assume it is the div with the class hero-container)

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

Then, we add the following methods to "methods":

      touchStart (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});
      },
      touchEnd (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
        }
      }

I changed the touch end part to a event listener that is used once for the touchend event, just in case the finger is outside the container when it lets go of the screen.