zoukankan      html  css  js  c++  java
  • uniapp 上下左右手势滑动时的事件

    <template>  
        <view @touchstart="touchStart" @touchend="touchEnd" style="height:2000px;">  
            测试  
        </view>  
    </template>  
    <script>  
        export default {  
            data() {  
                return {  
                    touchStartX: 0,  // 触屏起始点x  
                    touchStartY: 0,  // 触屏起始点y  
                };  
            },  
            methods: {  
                /**  
                * 触摸开始  
                **/  
                touchStart(e) {  
                    console.log("触摸开始")  
                    this.touchStartX = e.touches[0].clientX;  
                    this.touchStartY = e.touches[0].clientY;  
                },  
    
                /**  
                * 触摸结束  
                **/  
                touchEnd(e) {  
                    console.log("触摸结束")  
                    let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                    let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
                    if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                        if (deltaX >= 0) {  
                            console.log("左滑")  
                        } else {  
                            console.log("右滑")  
                        }  
                    } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
                        if (deltaY < 0) {  
                            console.log("上滑")  
                        } else {  
                            console.log("下滑")  
                        }  
                    } else {  
                        console.log("可能是误触!")  
                    }  
                },            
            }  
        };  
    </script>

    转于:https://ask.dcloud.net.cn/article/38074
  • 相关阅读:
    js的基本数据类型有哪些?
    UML 类图
    三种代理模式
    jsp 知识点
    httpServlet
    Qt时间&日期
    Microsoft visual studio C 运行时库 在 xx.exe中检测到一个错误
    C++调用COM之错
    PCL中的bug修改
    Qt使用SQLite
  • 原文地址:https://www.cnblogs.com/chenshaoxiong/p/14900854.html
Copyright © 2011-2022 走看看