uniapp 向左滑动进入下一题，向右滑动进入上一题功能实现
在 UniApp 中实现向左滑动进入下一题，向右滑动进入上一题的功能，可以利用触摸事件来判断用户的滑动方向。下面是一个简单的实现示例：
-
创建基本的项目结构：确保你有一个可以显示的问题的页面。
-
监听触摸事件：通过
touchstart和touchend事件来判断用户的滑动方向。 -
实现跳转逻辑：根据滑动的方向改变当前问题的索引。
<template><view class="container" @touchstart="touchStart" @touchend="touchEnd"><view class="question"><text>{{ currentQuestion }}</text></view></view>
</template><script>
export default {data() {return {questions: ["问题 1", "问题 2", "问题 3", "问题 4"], // 题目数组currentIndex: 0, // 当前题目的索引startX: 0, // 手指开始滑动的位置endX: 0 // 手指结束滑动的位置};},computed: {currentQuestion() {return this.questions[this.currentIndex]; // 当前题目}},methods: {touchStart(e) {this.startX = e.touches[0].clientX; // 记录开始滑动的位置},touchEnd(e) {this.endX = e.changedTouches[0].clientX; // 记录滑动结束的位置this.handleSwipe(); // 处理滑动逻辑},handleSwipe() {const distance = this.endX - this.startX; // 计算滑动距离const SWIPE_THRESHOLD = 50; // 滑动阈值if (distance > SWIPE_THRESHOLD) {this.prevQuestion(); // 向右滑动，上一题} else if (distance < -SWIPE_THRESHOLD) {this.nextQuestion(); // 向左滑动，下一题}},nextQuestion() {if (this.currentIndex < this.questions.length - 1) {this.currentIndex++; // 增加索引，显示下一题}},prevQuestion() {if (this.currentIndex > 0) {this.currentIndex--; // 减少索引，显示上一题}}}
};
</script><style>
.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}
.question {font-size: 24px;
}
</style>
说明：
-
数据结构：
questions数组中存储了问题内容，currentIndex用于跟踪当前显示的问题索引。 -
事件处理：
touchStart记录手指开始滑动的位置。touchEnd记录滑动结束的位置，并调用滑动处理逻辑。
-
滑动逻辑：根据计算的滑动距离决定是进入下一题还是上一题。定义了一个阈值
SWIPE_THRESHOLD，只有当滑动距离超过这个值时才会触发问题的切换。