快捷導(dǎo)航

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

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

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

前言

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

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

一、自定義導(dǎo)航欄

自定義導(dǎo)航欄配置：

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

二、 wx.enableAlertBeforeUnload

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

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

三、page-container

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

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

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

在正常邏輯下如果想要優(yōu)惠券只彈出一次，只需要把page-container 放在外面于內(nèi)容隔離開，當(dāng)點擊關(guān)閉時先把page-container給隱藏掉，并不會觸發(fā)當(dāng)前頁的返回，當(dāng)關(guān)閉page-container時會有離開前的事件，只需要在離開前的事件中添加對應(yīng)的顯示優(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)思路也是一直在原地進入當(dāng)前頁面。好處就是我能知道你想要返回了，確定就是會有一個進入的加載效果。

完整代碼

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