共计 1197 个字符,预计需要花费 3 分钟才能阅读完成。
需要:
TabBar 中点击 发动较量 跳转到一个空页面,依据用户状态,通过路由跳转到不同的页面,问题在于返回的时候。须要返回用户点击发动较量之前的 TabBar 页面。
问题:
一、无奈获取用户点击发动较量之前的界面
- 起因:TabBar 页面之间切换的时候,旧的 TanBar 页面会出栈,新的 TabBar 页面会入栈。所以无奈获取上一个 TabBar 页面。
- 验证:别离在两个 TabBar 页面,首页 Index,发动较量 createMatch,以及依据状态跳转的填写较量的 fillMatchInfo 的界面通过
getCurrentPages
打印以后页面栈。
- 首先启动小程序,首页中打印:
- 点击发动较量,在 createMatch 空页面中打印:
发现页面栈当初只有一个 createMatch 页面 - 依据用户状态,当初跳转到填写较量信息 fillMatchInfo 的界面,当初页面栈外面有两个页面。
- 解决办法:
在 model 外面本人定义一个页面栈。就能够获取到用户点击发动较量之前的 TabBar 页面。
而后在返回的时候,依据自定义页面栈的 url 进行路由跳转。
那么新的问题又来了,怎么管制返回到指定页面?
二、如何返回到指定页面
进入到发动较量 createMatch 页面后,会依据用户状态,跳到相应页面,这里是用navigateTo
Taro.navigateTo({url: '../fillMatchInfo/fillMatchInfo'})
navigateTo:保留以后页面,跳转到利用内的某个页面。然而不能跳到 tabbar 页面。应用 Taro.navigateBack 能够返回到原页面。小程序中页面栈最多十层。
navigateBack:敞开以后页面,返回上一页面或多级页面。可通过 getCurrentPages 获取以后的页面栈,决定须要返回几层。
然而页面栈中没有想要跳转的页面,所以不能用 navigateBack 的办法。
解决办法:
用 navigateTo 的时候会呈现小程序自带的返回键。小程序自带的返回键不反对自定义门路。一种解决办法就是在生命周期函数中监听页面卸载,而后进行路由跳转。
- 用 switchTab 跳转
呈现的问题是,确实会返回首页,然而返回首页之后又马上跳转到填写较量信息页面。
回到首页的时候在 onshow 外面打印的页面栈只有首页,然而又马上跳转到填写较量信息页面,在此页面的 onshow 中打印页面栈有首页和较量信息。 - 用 reLaunch 跳转
用 relaunch 跳转就会敞开以后所有页面栈。能达到目标,然而因为敞开所有页面栈会呈现一个卡顿.
最终终局办法
- 在全局的 model 外面自定义一个 TabBar 页面栈。在 TabBar 页面
componentDidHide
的时候把页面信息入栈(因为页面进入后盾必定是有页面的切换) - 是须要跳转页面的生命周期函数
componentWillUnmount
中监听页面卸载,而后进行路由跳转。(url 来源于自定义页面栈的栈顶元素)
正文完