The applet prevents the sliding back and exit event that comes with the phone (uni-app, WeChat applet, page-container)

1. Configure in pages.json before using page-container (important!)

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

insert image description here

2. Configure in the page

<page-container :show="true" :close-on-slideDown="false" :overlay="false" :duration="false"
	style="z-index: 99;width: 100%; overflow: auto;height:100vh"@touchstart.native="onTouchStart"
	@touchmove.native="onTouchEnd">
	
	<view style="z-index: 999;pointer-events:auto"> //页面内容
	
</page-container>

@touchstart.native and @touchmove.native are listening events for mask layer sliding

//触摸事件(开始)
			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) {
    
    
					//滑动一定范围后操作,弹出弹窗或者提示
				}
			},

For some properties of page-container,
please refer to the official document for details: https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

insert image description here

Guess you like

Origin blog.csdn.net/weixin_47211345/article/details/129466086