微信小程序阻止页面返回实例详解(包滑动、自动返回键)

{
	"path": "pages/login/login",
	"style": {
+		"navigationStyle": "custom"
	}
}

onLoad(e) {
			uni.enableAlertBeforeUnload({
			    message: "返回上页时弹出对话框",
			    success: function (res) {
			      console.log("点击确认按钮了：", res);
			    },
			    fail: function (errMsg) {
			      console.log("点击取消按钮了：", errMsg);
			    },
			 })
		},

<page-container :show="true"  :duration="false" :overlay="false">
    存放内容
</page-container>

<template>
	<view   >
		<scroll-view scroll-y="true" style="height: 100vh;" :scroll-top="top"  class="mainBox" @scroll="scroll">
			<view class="" v-for="item in 99">
					我是内容
			</view>
	</scroll-view>
	<page-container :show="true"  :duration="false" :overlay="false" @beforeleave="beforeleave"></page-container>
	</view>
</template>
methods:{
	beforeleave(){
				uni.showModal({
					title:'弹出优惠券逻辑'
				})
			},
}

<template>
	<page-container :show="isShow"  :duration="false" :overlay="false"  @beforeleave="beforeleave" @afterleave="afterleave"   >
		<scroll-view scroll-y="true" style="height: 100vh;" :scroll-top="top"  class="mainBox" @scroll="scroll">
			<view class="back" @click="back">
				指定返回按钮
			</view>
			<view class="" v-for="item in 99">
				我是内容
			</view>
		</view>
	</scroll-view>
	</page-container>
</template>
<script>
	export default {
		data() {
			return {
				isShow:true, 
				top:0,
				scrollTop:0,
			}
		},
		onLoad(e) {
			this.top = e.top
		},
		methods: {
			back(){
				this.isShow = false
				console.log('点击返回了');
				uni.navigateBack()
			},
			beforeleave(){
				if(!this.isShow) return uni.navigateBack()
				console.log('点击返回了');
				uni.redirectTo({
					url:`/pages/mine/test?top=${this.scrollTop}`,
					fail(err) {
						console.log(err);
					}
				})
			},
			// 需要在退出一次 否则退不出去
			afterleave(){
				if(!this.isShow) return uni.navigateBack()
			},
			// 记录当前位置 下次进来时自动转到刚才的位置
			scroll(e){
				this.scrollTop = e.target.scrollTop
			}
		},
	}
</script>