阅读量:3
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(); },