帮助客户建立一个几乎没有任何 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");
}
}
});
您可以尝试对 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
}
}
我将触摸结束部分更改为事件侦听器,该事件侦听器仅用于触摸结束事件,以防万一松开屏幕时手指在容器外。