添加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事件采取行动(我假设它是带有类英雄容器的div(

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

然后，我们将以下方法添加到"；方法"：

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

我将触摸端部分更改为一个用于触摸端事件的事件监听器，以防手指离开屏幕时在容器外。