微信小程序阻止頁面返回實例詳解(包滑動、自動返回鍵)

更新時間：2023年06月01日 11:18:42 作者：奧特曼

小程序如果在頁面內(nèi)進行復雜的界面設計,用戶進行返回操作會直接離開當前頁面,不符合用戶預期,下面這篇文章主要給大家介紹了關于微信小程序阻止頁面返回(包滑動、自動返回鍵)的相關資料,需要的朋友可以參考下

前言

這個場景還是挺有意思的，比如某多多，只要你點左上角的返回好家伙，滿滿又 花不了 的優(yōu)惠券就來了，讓你擁有一種消費最劃算的感覺。

如果你的場景比較簡單，只是對左上角的返回進行監(jiān)聽，只需要關閉自帶的導航欄，手寫導航欄或用ui庫的寫好的導航欄就好了。然后給寫好的導航欄的返回按鈕添加一個返回的事件做自己想要實現(xiàn)的場景就好了。

一、自定義導航欄

自定義導航欄配置：

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

二、 wx.enableAlertBeforeUnload

如果你的場景點擊返回時只用來提示一下用戶類似于用一個showModel（提示框）的展示效果，可以使用wx.enableAlertBeforeUnload，只要一點擊左上角的返回就會觸發(fā)當前事件，如果點擊確定退出當前頁，如果點擊取消留在當前頁面。

onLoad(e) {
			uni.enableAlertBeforeUnload({
			    message: "返回上頁時彈出對話框",
			    success: function (res) {
			      console.log("點擊確認按鈕了：", res);
			    },
			    fail: function (errMsg) {
			      console.log("點擊取消按鈕了：", errMsg);
			    },
			 })
		},

三、page-container

如果你的場景比較復雜，手機都會有自帶的滑動返回，例如ios的滑動返回，安卓的滑動返回和back返回鍵，就需要用到page-container，他的效果類似于彈窗的形式存在著。

<page-container :show="true"  :duration="false" :overlay="false">
    存放內(nèi)容
</page-container>

當點擊返回按鈕時會先執(zhí)行把當前的page-container給隱藏掉，再次點擊返回時才能夠返回上一頁。

在正常邏輯下如果想要優(yōu)惠券只彈出一次，只需要把page-container 放在外面于內(nèi)容隔離開，當點擊關閉時先把page-container給隱藏掉，并不會觸發(fā)當前頁的返回，當關閉page-container時會有離開前的事件，只需要在離開前的事件中添加對應的顯示優(yōu)惠券邏輯即可。

<template>
	<view   >
		<scroll-view scroll-y="true" style="height: 100vh;" :scroll-top="top"  class="mainBox" @scroll="scroll">
			<view class="" v-for="item in 99">
					我是內(nèi)容
			</view>
	</scroll-view>
	<page-container :show="true"  :duration="false" :overlay="false" @beforeleave="beforeleave"></page-container>
	</view>
</template>
methods:{
	beforeleave(){
				uni.showModal({
					title:'彈出優(yōu)惠券邏輯'
				})
			},
}

如果呢你這個項目比較特別特別的惡心，只要你點擊左上角的返回我就不讓你出去，什么時候點擊我指定的返回你才夠出去，什么都得聽我的！實現(xiàn)思路也是一直在原地進入當前頁面。好處就是我能知道你想要返回了，確定就是會有一個進入的加載效果。

完整代碼

<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">
				我是內(nèi)容
			</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()
			},
			// 記錄當前位置 下次進來時自動轉(zhuǎn)到剛才的位置
			scroll(e){
				this.scrollTop = e.target.scrollTop
			}
		},
	}
</script>