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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM