javascript 在Svelte中滑动动作出界

w9apscun  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(95)

我正在制作一个应用程序,它可以横向遍历.cards div的各个部分。

<div class="cards" on:touchstart={handleTouchStart}
on:touchmove={handleTouchMove}
on:touchend={handleTouchEnd}>
<About/>
<Services/>
<Contact/>
</div>

手柄触摸功能可以很好地通过滑动来移动div,但是如果它到达div的末尾,我似乎不能禁用滑动。这是我目前得到的

const handleTouchStart = (event) => {
    startX = event.touches[0].clientX;
};

const handleTouchMove = (event) => {
    const currentX = event.touches[0].clientX;
    dist = startX - currentX;
    console.log(distance)
    if (distance===0 && dist < 0){
        dist=0
    }
    if (distance<-200){
        dist=0
    }
};

const handleTouchEnd = () => {
    if (dist > 0) {
        // Swipe left
        goRight();
} else if (dist < 0) {
  // Swipe right
  goLeft();
}
};

handleTouchMove中的第一个if语句按预期工作,但第二个不是。我试着把if改为else,我试着用<=代替<,我试着改变条件中的值(div的宽度是300 vw)。它们都没有任何效果。

zazmityj

zazmityj1#

我明白了,修复其实超级简单!首先,我将两个语句合并为一个,然后修复它的实际方法是寻找大于0的dist,而不是小于0的dist,这意味着在另一个方向滑动。下面是工作if语句。

if ((distance === 0 && dist < 0) || (distance <= -200 && dist > 0)){
        dist=0
    }

相关问题