快捷導(dǎo)航

微信小程序阻止頁(yè)面返回實(shí)例詳解(包滑動(dòng)、自動(dòng)返回鍵)

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

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

前言

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

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

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

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

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

二、 wx.enableAlertBeforeUnload

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

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

三、page-container

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

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

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

在正常邏輯下如果想要優(yōu)惠券只彈出一次，只需要把page-container 放在外面于內(nèi)容隔離開，當(dāng)點(diǎn)擊關(guān)閉時(shí)先把page-container給隱藏掉，并不會(huì)觸發(fā)當(dāng)前頁(yè)的返回，當(dāng)關(guān)閉page-container時(shí)會(huì)有離開前的事件，只需要在離開前的事件中添加對(duì)應(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)惠券邏輯'
				})
			},
}

如果呢你這個(gè)項(xiàng)目比較特別特別的惡心，只要你點(diǎn)擊左上角的返回我就不讓你出去，什么時(shí)候點(diǎn)擊我指定的返回你才夠出去，什么都得聽我的！實(shí)現(xiàn)思路也是一直在原地進(jìn)入當(dāng)前頁(yè)面。好處就是我能知道你想要返回了，確定就是會(huì)有一個(gè)進(jì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('點(diǎn)擊返回了');
				uni.navigateBack()
			},
			beforeleave(){
				if(!this.isShow) return uni.navigateBack()
				console.log('點(diǎn)擊返回了');
				uni.redirectTo({
					url:`/pages/mine/test?top=${this.scrollTop}`,
					fail(err) {
						console.log(err);
					}
				})
			},
			// 需要在退出一次 否則退不出去
			afterleave(){
				if(!this.isShow) return uni.navigateBack()
			},
			// 記錄當(dāng)前位置 下次進(jìn)來時(shí)自動(dòng)轉(zhuǎn)到剛才的位置
			scroll(e){
				this.scrollTop = e.target.scrollTop
			}
		},
	}
</script>