本文介绍如何在 Svelte 应用中，通过监听 touch 事件，实现水平滑动手势，并防止滑动超出容器边界。我们将分析问题的根本原因，并提供有效的解决方案，确保用户交互的流畅性和应用的稳定性。
在 Svelte 中，实现水平滑动手势是很常见的需求，尤其是在移动端应用开发中。然而，如果不加以限制，用户可能会滑动超出容器的边界，导致不佳的用户体验。本文将介绍如何通过监听 touchstart、touchmove 和 touchend 事件，并结合逻辑判断，有效地防止滑动超出边界。
监听 Touch 事件
首先，我们需要在 HTML 元素上监听相应的 touch 事件。在本例中，我们监听的是一个 div 元素，该元素包含了多个卡片内容。
<div class="cards" on:touchstart={handleTouchStart}
on:touchmove={handleTouchMove}
on:touchend={handleTouchEnd}>
<About/>
<Services/>
<Contact/>
</div>接下来，我们需要定义相应的事件处理函数：handleTouchStart、handleTouchMove 和 handleTouchEnd。
实现滑动逻辑
handleTouchStart 函数用于记录触摸开始时的 X 坐标。
let startX;
let dist;
const handleTouchStart = (event) => {
startX = event.touches[0].clientX;
};handleTouchMove 函数用于计算滑动距离，并根据距离进行相应的处理。关键在于如何判断是否到达边界，并阻止进一步滑动。
const handleTouchMove = (event) => {
const currentX = event.touches[0].clientX;
dist = startX - currentX;
// 核心逻辑：判断是否超出边界，并阻止滑动
if ((distance === 0 && dist < 0) || (distance <= -200 && dist > 0)){
dist=0;
}
console.log(dist);
};handleTouchEnd 函数用于在滑动结束后，根据滑动距离执行相应的操作，例如切换卡片。
const handleTouchEnd = () => {
if (dist > 0) {
// Swipe left
goRight();
} else if (dist < 0) {
// Swipe right
goLeft();
}
};边界判断的关键
最初的问题在于边界判断的逻辑不正确。关键在于理解 dist 的正负号代表的滑动方向，以及如何结合 distance 变量来判断是否已经到达边界。
正确的逻辑应该是：
- 如果已经到达最左边 ( distance === 0 )，并且继续向左滑动 ( dist < 0 )，则阻止滑动。
- 如果已经滑动到一定距离 ( distance <= -200 )，并且继续向右滑动 ( dist > 0 )，则阻止滑动。
将这两个条件合并成一个 if 语句，即可实现边界判断。
if ((distance === 0 && dist < 0) || (distance <= -200 && dist > 0)){
dist=0;
}总结
通过监听 touch 事件，并结合正确的边界判断逻辑，我们可以在 Svelte 应用中实现流畅且可控的水平滑动手势。关键在于理解滑动距离的正负号，并根据实际需求调整边界判断的条件。在实际开发中，可以根据具体的 UI 设计和交互需求，进一步优化滑动体验。例如，可以添加动画效果，或者根据滑动速度调整滑动距离。
