欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 八卦 > uniapp手机屏幕左滑返回上一页支持APP,H5

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

2024/10/24 4:31:31 来源:https://blog.csdn.net/Rio_Gaven/article/details/139346022  浏览:    关键词: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'// })// 这里自己写要跳转的路径},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com