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 数据：