uniapp手机屏幕左滑返回上一页支持APP,H5

核心:@touchstart="touchStart" @touchend="touchEnd"

代码示例:

<template>
  <view class="payPasswordSetting" @touchstart="touchStart" @touchend="touchEnd">
    
  </view>
</template>
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("左滑")  
                this.leftClick()
            } 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("可能是误触!")  
        }  
    },
    leftClick(){
        // uni.navigateTo({
        //     url: './setting'
        // })
        // 这里自己写要跳转的路径
    },

相关推荐

  1. uniapp手机屏幕返回支持APP,H5

    2024-06-07 21:14:07       24 阅读
  2. uniapp返回并刷新数据

    2024-06-07 21:14:07       54 阅读
  3. uniapp先显示提示消息再返回

    2024-06-07 21:14:07       36 阅读
  4. 优雅实现uniapp返回传参

    2024-06-07 21:14:07       32 阅读
  5. uni-app实现返回刷新

    2024-06-07 21:14:07       61 阅读
  6. uniapp 返回再进入当前mounted不执行

    2024-06-07 21:14:07       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-07 21:14:07       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-07 21:14:07       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-07 21:14:07       82 阅读
  4. Python语言-面向对象

    2024-06-07 21:14:07       91 阅读

热门阅读

  1. 08-使用HappyPack提升Webpack构建速度

    2024-06-07 21:14:07       31 阅读
  2. MATLAB 矩阵

    2024-06-07 21:14:07       27 阅读
  3. 网络安全第一课

    2024-06-07 21:14:07       28 阅读
  4. RN的安卓和iOS打包步骤(软件托管平台推荐)

    2024-06-07 21:14:07       29 阅读
  5. 开源大模型源代码

    2024-06-07 21:14:07       26 阅读
  6. 在RT-Thread下为MPU手搓以太网MAC驱动-4

    2024-06-07 21:14:07       28 阅读
  7. PyTorch、显卡、CUDA 和 cuDNN 之间的关系

    2024-06-07 21:14:07       32 阅读
  8. type 相关的几个试验

    2024-06-07 21:14:07       31 阅读
  9. 补充SimGNN

    2024-06-07 21:14:07       28 阅读