uni-app——監聽返回鍵的退出

如圖所示，要求點擊左上角返回鍵，先顯示彈框，操作後纔有退出效果。

注：此時的返回鍵，不是我寫的元素，而是 uniapp 的默認返回鍵。

方法一：（親自用安卓手機 OPPO Find X 測試，可用，同時物理返回鍵也可觸發該效果；IOS系統暫未測試）

onBackPress(e) {
	console.log(e);
	if (e.from == 'backbutton') {
		uni.showModal({
			title: '提示',
			content: '是否保存？',
			success: function (res) {
				if (res.confirm) {
					uni.showToast({
						title: '用戶點擊確定',
						duration: 1000
					})
				} else if (res.cancel) {
					uni.showToast({
						title: '用戶點擊取消',
						duration: 1000
					})
				}
				uni.navigateBack({
					delta: 1
				});
			}
		});
		return true; //阻止默認返回行爲
	}
},

方法二：見此博主

onBackPress(e) {
    console.log(e);
    if(e.from == 'backbutton'){
    this.$utils.showModal('提示','房型尚未保存,確認退出嗎?',true,'繼續編輯','確定').then(()=>{
    	console.log('確定')
    	uni.navigateBack({
    		delta:1
    	})
    }).catch(()=>{
    	console.log('繼續編輯')
    })
    return true;//阻止默認返回行爲
    }
}

方法三：

onBackPress(options) {
	if (options.from === 'backbutton') {
		if (this.editShow.edit) {
			uni.showModal({
				title: '提示',
				content: '回執信息未保存，是否離開',
				success: res => {
					if (res.confirm) {
						uni.navigateBack();
					}
				}
			});
			// 禁止默認返回
			return true;
		}
	}
},