uniapp实现左右滑动切换题目

uniapp实现左右滑动切换题目

需求

• 做一个答题功能，页面只显示一题，用户在屏幕上左右滑动，切换到上一题或下一题。

思路

• 监听触摸事件 touchstart 和 touchend，根据相减的距离的正负判断用户是左滑（上一题）还是右滑（下一题）

效果展示

实现

页面：设置滑动页面的区域；用 v-for 遍历数据；用 v-if 控制展示隐藏题目；给数据绑定触摸事件

<view class="slide-the-answer-container" >
    <!-- 滑动页面区域 -->
    <view 
        class="slide-area" 
        v-for="(item,index) in topic"
        v-if="index==nth || newIndex==index"
        @touchstart="touchStart"
        @touchend="touchEnd($event,index)">
    	<!-- 答题盒子 -->
        <view class="topic-box">
            <view>{{item.title}}</view>
        </view>
    </view>
</view>

data 数据：

startX: 0, // 滑动开始x轴位置
moveX: 0, // 滑动的x轴距离
nth: 0, // 当前第几题（以下标计算）
newIndex: 0, // 滑动到第几题（以下标计算）
topic: [ // 题目
    { title: '第1题' },
    { title: '第2题' },
    { title: '第3题' },
    { title: '第4题' },
    { title: '第5题' },
    { title: '第6题' },
    { title: '第7题' },
    { title: '第8题' },
    { title: '第9题' },
    { title: '第10题' }
]

触摸事件：判断用户手势，切换题目

touchStart(e) { // 手指触摸屏幕时触发，有一个手指放在屏幕上也会触发
    // 获取触摸时的原点
    this.startX = e.changedTouches[0].pageX // 触摸目标在页面中的X坐标
    console.log('开始触摸：', this.startX);
},
touchEnd(e,index) { // 手指离开屏幕时触发
    // 获取滑动距离
    const moveX = e.changedTouches[0].pageX - this.startX
    // 判断滑动方向
    if (moveX < -100 && index<this.topic.length-1) {
    	// 【下一题】 判断大幅度左滑且不是最后一题
        this.newIndex=this.newIndex+1
        this.nth= this.nth+1
        console.log('第'+this.index+'题');
    }
    else if (moveX > 100 && index!= 0) { 
         // 【上一题】 判断大幅度右滑且不是第一题
         this.newIndex=this.newIndex-1
         this.nth=this.nth-1
    }
}

触摸事件

• touchstart：手指触摸屏幕时触发，有一个手指放在屏幕上也会触发
• touchmove：手指滑动屏幕时连续触发
• touchend：手指离开屏幕时触发

触摸事件的默认参数 event 中包含了三个用于跟踪触摸的属性对象的数组：

• touches：当前跟踪的触摸操作的touch对象的数组

• targetTouches：特定于事件目标的Touch对象的数组

• changeTouches：自上次触摸以来发生了什么改变的touch对象的数组

每个Touch对象包含的属性如下：

• clientX：触摸目标在视口中的x坐标。 　clientY：触摸目标在视口中的y坐标。
• pageX：触摸目标在页面中的x坐标。 　 pageY：触摸目标在页面中的y坐标。
• screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。
• identifier：标识触摸的唯一ID。 target：触摸的DOM节点目标。

完整代码

GitHub：uniapp实现用户左右滑动切换题目功能