uniapp 页面返回询问
2025-05-23 15:55 法子 阅读(71) 评论(0) 收藏 举报1、自定义导航栏,自定义后退函数
2、小程序:page-container。wx.enableAlertBeforeUnload和路由的routerBeforeEach,对于手势滑动返回时不做拦截,所以没用这俩
3、APP:Android使用onBackPress,iOS 在pages.json里给页面配置"style":{"disableSwipeBack": true}
<template> <view> <u-navbar @leftClick="customBack" fixed placeholder /> <u-input placeholder="请输入名字" v-model="inputName"></u-input> <u-input placeholder="请输入手机" type="number" v-model="inputPhone"></u-input> <!-- #ifdef MP-WEIXIN --> <view v-if="!willBack && showContainer" class="container-view"> <page-container :show="showContainer" :overlay="false" @beforeleave="beforeleave" :close-on-slide-down="false"></page-container> </view> <!-- #endif --> </view> </template> <script> export default { data () { return { showContainer: true, willBack: false, inputName: '', inputPhone: '' }; }, computed: { cannotBack () { return this.inputName || this.inputPhone } }, // #ifdef APP-PLUS onBackPress (options) { if (options.from == 'backbutton' && this.cannotBack) { // Android 底部返回键 this.$Router.$lockStatus = false this.customBack(); return true } else { return false } }, // #endif /* // 或者pages.json里给页面配置"style":{"disableSwipeBack": true} onLoad (options) { // #ifdef APP-PLUS // iOS 禁止滑动后退 let currentWebview = this.$mp.page.$getAppWebview(); currentWebview.setStyle({ popGesture: "none" }); // #endif }, onUnload () { // #ifdef APP-PLUS // iOS 恢复滑动后退 let currentWebview = this.$mp.page.$getAppWebview(); currentWebview.setStyle({ popGesture: "close" }); // #endif }, */ methods: { customBack () { // 自定义返回函数 this.beforeleave() }, beforeleave () { if (this.cannotBack) { // 微信小程序: iOS 滑动后退;Android:滑动后退、底部后退 this.willBack = true uni.showModal({ title: '提示', content: `修改尚未保存,确认退出吗?`, confirmText: "确认", cancelText: '留在本页', confirmColor: '#1677FF', success: (res) => { if (res.confirm) { uni.navigateBack() } else { this.willBack = false } } }) } else { uni.navigateBack() } } } } </script>
浙公网安备 33010602011771号