小程序阻止手机自带的滑动返回退出事件（uni-app，微信小程序，page-container）

• 移动开发

1、使用page-container前先在pages.json配置（重点！）

"usingConponents":{
		"page-container":"/pages/detail/detail"
	},

在这里插入图片描述

2、在页面中配置

	
	 //页面内容

@touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件

//触摸事件(开始)
			onTouchStart(e) {
				this.isShow = true
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY
			},
			//触摸事件(结束)
			onTouchEnd(e) {
				this.endX = e.changedTouches[0].clientX // 触摸终点
				const subX = this.startX - this.endX // 触摸滑动距离

				if (subX > 50 || subX < -50) {
					//滑动一定范围后操作，弹出弹窗或者提示
				}
			},

关于page-container 的一些属性

详细可以按照官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/34bf6bfe94.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐