当前位置: 首页 > article >正文

vue2鼠标左划、右划(左滑、右滑)时间

1、在method中:

//鼠标左划、右划事件
            handleTouchStart(event) {
                this.startX = event.touches[0].clientX;
            },
            handleTouchEnd(event) {
                const endX = event.changedTouches[0].clientX;
                const threshold = 30; // 阈值可以根据需要调整

                if (endX - this.startX > threshold) {
                    // 右划事件
                    // console.log('右划事件')
                    if (this.currentNum < this.objs.length - 1) {
                        this.currentNum++;
                    }
                } else if (this.startX - endX > threshold) {
                    // 左划事件
                    // console.log('左划事件')
                    if (this.currentNum > 0) {
                        this.currentNum--;
                    }
                }
            },

<template>
    <div  @touchstart="handleTouchStart" @touchend="handleTouchEnd">

        .....

   </div>

</template>


http://www.kler.cn/news/358112.html

相关文章:

  • 从0开始深度学习(12)——多层感知机的逐步实现
  • RHCE第一次笔记
  • 【机器学习】深入浅出讲解贝叶斯分类算法
  • poisson过程——随机模拟(Python和R实现)
  • Element-ui官方示例(Popover 弹出框)
  • 微信小程序应用echarts和二维表的结合
  • 动态规划-子数组系列——乘积最大子数组
  • 【面试11】嵌入式之模电/数电
  • setState更新状态的2种写法
  • 高级算法设计与分析 学习笔记14 FFT
  • Axure科技感元件:打造可视化大屏设计的得力助手
  • CMake技术细节:解决未定义,提供参数
  • 基于MATLAB的交通标志的识别
  • ARM嵌入式学习--第四天
  • Flutter Column和Row组件
  • java-实例化一个List并添加数据的方法
  • yolov8实例分隔
  • 胤娲科技:AI大模型的隐秘战争——当“智能”成为双刃剑
  • 会议点名人员crud-web前端Vue3多选调用示例
  • docker 数据管理,数据持久化详解 二 数据卷容器