h5或uniapp或微信小程序,实现左上角返回到指定页面,侧滑左滑返回指定页面,安卓物理返回键返沪指定页面解决思路的思考

h5或uniapp或微信小程序,实现左上角返回到指定页面,侧滑左滑返回指定页面,安卓物理返回键返沪指定页面

uniapp开发app,(非微信小程序)

自定义的左上角返回按钮

<i class="iconfont icon-zuojiantou" style="font-size: 24px;" @click="goBack()"></i>

方法

goBack(){
   
			
				let pages = getCurrentPages();
				//函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面
				var num=pages.length
				//当前页面栈总数
				var backnum
				//需要返回的页数
				for(var i =0;i<num;i++){
   
					//循环找到指定页面路由所在的页数
					if(pages[i].route=='pages/xxx/xxx'){
   
					console.log(pages[i].route,'pages[i].route')
					//'pages/xxx/xxxx'你需要返回的页面路由
						backnum=num-i-1
						//计算返回的层数,总数-指定页面页数-1
					}		
				}
				console.log(backnum,'backnum')
				uni.navigateBack({
   
					delta:backnum
						//返回的页面数,如果 delta 大于现有页面数,则返回到首页。
				})
			
		},

安卓物理返回键监听,该方法与生命周期函数同级,也可以尝试放在methods里面。

onBackPress(options){
   //这里是监听安卓物理返回键或者侧滑左滑返回方式
		if(options.from=='navigateBack'){
   
			return false
		}else if(options.from=='backbutton'){
   //物理键默认返回上一级,我们在这里进行了处理
			this.goBack()//走我们自己的方法
			return true
		}else if('xxxx){
   //也可以是其他方式
		
		}
	}

uniapp写的微信小程序

思路,因为uniapp写的微信小程序用onBackPress监听不到不支持监听安卓物理返回,所以换了个想法,默认认为是安卓物理键或者侧滑左滑返回:如果是我自己的按钮,就走goBackFn的方法,把androidReturn设置为true,离开页面就不会执行beforeDestroy里面的方法;如果是物理按钮返回,那么离开页面,会触发生命周期函数beforeDestroy,所以在销毁页面前,判断是否为物理按键返回,是则调用goBack

自己写的左上角返回按钮
<i class="iconfont icon-zuojiantou" style="font-size: 24px;" @click="goBackFn()"></i>
data里面定义参数

androidReturn:true,//默认安卓物理键返回

定义方法

goBack(){
   
	let pages = getCurrentPages();
				//函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面
				var num=pages.length
				//当前页面栈总数
				var backnum
				//需要返回的页数
				for(var i =0;i<num;i++){
   
					//循环找到指定页面路由所在的页数
					if(pages[i].route=='pages/xxx/xxx'){
   
					console.log(pages[i].route,'pages[i].route')
						backnum=num-i-1
						//计算返回的层数,总数-指定页面页数-1
					}		
				}
				console.log(backnum,'backnum')
				uni.navigateBack({
   
					delta:backnum
						//返回的页面数,如果 delta 大于现有页面数,则返回到首页。
				})
}

生命周期钩子函数写代码,可以实现微信小程序自带的左上角返回,和安卓物理键,侧滑左滑返回

//uniapp内置了vue,所以可以用vue的生命周期
beforeDestroy() {
   
		if(this.androidReturn){
   console.log('物理键返回')
			this.goBack()
		}
	},

自定义左上角安检的返回

goBackFn(){
   
			this.androidReturn=false;
			this.goBack();
		},

最近更新

  1. TCP协议是安全的吗?

    2023-12-09 08:40:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-09 08:40:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-09 08:40:04       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-09 08:40:04       20 阅读

热门阅读

  1. UDP群聊

    UDP群聊

    2023-12-09 08:40:04      36 阅读
  2. Jenkins安装

    2023-12-09 08:40:04       46 阅读
  3. 达梦(主备)搭建

    2023-12-09 08:40:04       29 阅读
  4. WPF(Windows Presentation Foundation)的 ToolBar控件

    2023-12-09 08:40:04       39 阅读
  5. 个人简介(非学习类笔记)

    2023-12-09 08:40:04       41 阅读
  6. Dubbo学习

    2023-12-09 08:40:04       35 阅读
  7. C++同异步极致线程池

    2023-12-09 08:40:04       42 阅读
  8. ELK架构监控MySQL慢日志

    2023-12-09 08:40:04       44 阅读
  9. 线程安全与并发区别

    2023-12-09 08:40:04       43 阅读
  10. 晶闸管是什么

    2023-12-09 08:40:04       40 阅读