Javascript 使用Vue添加左扫和右扫

帮助客户创建一个几乎不懂JavaScript的网站，但已经发展到现在，现在正在寻找一个简单、快速的代码添加，可以将左/右滑动功能添加到Hero和Hero BG标记中

例如：

因此，每当用户向左或向右滑动主英雄图像和上面模糊的英雄图像时，都会滚动到下一个图像，就像单击V形或按键盘上的箭头键一样

Vue.component（“英雄背景”{
模板：`
`,
道具：[“选定”]
});
Vue.组件（“英雄”{
模板：`


概述
`,
数据（）{
返回{
gridEnabled:false，
已选择：0，
事情：真的
};
},
计算：{
selectedItem（）{
退货信息【本次选择】；
},
标题（）{
常量逗号=this.selectedItem.title.indexOf（“，”）；
const len=this.selectedItem.title.length；
const strBeginning=this.selectedItem.title.substring（逗号，0）；
const strengd=this.selectedItem.title.substring（逗号，len）；
if（this.selectedItem.title.includes（“，”））{
返回`${strBeginning}${strengd}`；
}
返回this.selectedItem.title；
},
最大值（）{
返回信息长度-1；
}
},
创建（）{
window.addEventListener（“keydown”，e=>{
如果（例如keyCode===37）{
这是先前的（）；
返回；
}
如果（例如keyCode===39）{
这个。下一个（）；
返回；
}
});
事件。$on（“updateImg”，索引=>{
这是所选的=索引；
this.gridEnabled=！this.gridEnabled；
});
},
方法：{
下一个（）{
this.selected==this.maxImages
？（此项选择=0）
：（此。所选+=1）；
},
前（）{
此。已选择===0
？（this.selected=this.maxImages）
：（选择的this.selected-=1）；
},
enableGrid（）{
this.gridEnabled=！this.gridEnabled；
窗口。滚动（0，0）；
事件。$emit（“启用网格”）；
}
}
});

您可以尝试对touchstart和touchend javascript事件进行操作，并使用它们确定用户滑动的方式

所以

编辑 首先，我们希望在touchstart事件中执行我们想要滑动的操作（我假设它是带有类hero容器的div）

。。。

然后，我们将以下方法添加到“方法”中：

touchStart（touchEvent）{
如果（touchEvent.changedTouches.length！==1）{//我们只关心是否使用了一根手指
返回；
}
const posXStart=touchEvent.changedTouches[0].clientX；
addEventListener（'touchend'，（touchEvent）=>this.touchend（touchEvent，posXStart），{once:true}）；
},
touchEnd（touchEvent，posXStart）{
如果（touchEvent.changedTouches.length！==1）{//我们只关心是否使用了一根手指
返回；
}
const posXEnd=touchEvent.changedTouches[0].clientX；
if（posXStartposXEnd）{
this.next（）；//向左滑动
}
}

---

我将touch-end部分更改为一个事件监听器，用于touch-end事件，以防手指离开屏幕时伸出容器。

您可以尝试对touch-start和touch-end javascript事件进行操作，并使用它们确定用户滑动的方式

所以

编辑 首先，我们希望在touchstart事件中执行我们想要滑动的操作（我假设它是带有类hero容器的div）

。。。

然后，我们将以下方法添加到“方法”中：

touchStart（touchEvent）{
如果（touchEvent.changedTouches.length！==1）{//我们只关心是否使用了一根手指
返回；
}
const posXStart=touchEvent.changedTouches[0].clientX；
addEventListener（'touchend'，（touchEvent）=>this.touchend（touchEvent，posXStart），{once:true}）；
},
touchEnd（touchEvent，posXStart）{
如果（touchEvent.changedTouches.length！==1）{//我们只关心是否使用了一根手指
返回；
}
const posXEnd=touchEvent.changedTouches[0].clientX；
if（posXStartposXEnd）{
this.next（）；//向左滑动
}
}

---

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

您能解释一下如何直接将其添加到我的代码中吗？我认为应该这样做：）记住在触控设备上或设备工具栏处于活动状态时进行测试（F12在Chrome中激活开发工具，应该在inspect图标旁边）以获取触摸事件。是的，这非常有效！但是有没有添加滑动动画的方法？我非常了解CSS，只是不确定如何实现测试这些工具是否有效的最佳方法：如果这解决了您的问题，请记住将问题标记为已回答。：）你能解释一下如何直接添加到我的代码中吗？我想应该这样做：）记住在触摸设备上进行测试，或者在设备工具栏处于活动状态时（F12可以激活Chrome中的开发工具，应该在inspect图标旁边）获取触摸事件。是的，这非常有效！但是，有没有办法添加滑动动画？我非常了解CSS，只是不知道如何实现最好的方法来测试这些方法是否有效：如果这解决了您的问题，请记住将问题标记为已回答。：）

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

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

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