前言
项目是运行在安卓平板上,已设置成横屏模式已经隐藏了状态栏和 底部虚拟按钮 顺便贴上代码
//设置横屏模式 pages.json
"globalStyle": {
"pageOrientation": "landscape"
}
//设置全屏模式 App.vue 使用h5+ api
plus.navigator.hideSystemNavigation()
问题描述
两个页面分别为页面A、页面B都为非tabbar页面,使用uni.navigateTo从首页页面A跳转到页面B会出现下面这种情况,使用uni.redirectTo则不会重现
在Dcload中遇到一位和我情况相同的案例 这里为了方便直接引用了图片 相同案例戳这里
可以看到从页面A跳转到页面B后底部被截去了正好是底部虚拟按钮的高度,而且显示了页面A的底部。
确认为bug 官方反馈无果
解决方案
经过问题排查，确定是因为uni.navigateTo有默认动画才触发了此bug，禁用动画后果然正常了。但没有跳转动画这种体验是很糟糕的，偶然间来的灵感想到了最终解决方案。
在跳转到指定页面前先跳转到一个透明的空页面 然后再空页面初始化的时候跳转到指定页面既不会触发bug也保留了动画效果，再封装一下完美解决，贴上代码
步骤
1. 新建一个空白且透明的页面redirectRouter.nvue
<template>
<div class="container"></div>
</template>
<script>
export default {
onLoad(option) {
...
}
}
</script>
<style scoped lang="stylus">
.container
opacity 0
</style>
在pages.json中这样设置
{
"path" : "pages/redirectRouter/redirectRouter",
"style" : {
"app-plus": {
"background": "transparent"
}
}
}
2. 在你的工具类中封装一个路由跳转的方法
/**
* 先跳转到透明页面 再跳转到指定路由
* @param {string} route 指定路由
*/
const Router = (route) => {
delayFunc(() => {
//这里用到了节流函数 防止双击处罚两次
uni.navigateTo({
url: "../redirectRouter/redirectRouter?route=" + route,
animationType: 'zoom-fade-out',
animationDuration: 0 //动画时间调整为0 更快跳转到指定路由
})
})
}
//节流函数
let lastScrollCall
const delayFunc = (fn) => {
const now = new Date().getTime()
if (now - lastScrollCall < 1400) return
lastScrollCall = now
setTimeout(() => { fn() }, 60)
}
在main.js中import你的的工具类 并将其挂载到Vue.prototype中 这里就不贴代码了
由于是nvue项目 页面中无法使用Vue.prototype，所以在App.vue中将你的工具类挂载到getApp().globalData中
//这里假设Router已经挂载到了Vue.prototype
getApp().globalData.Router() = this.Router()
3. 现在可以通过 getApp().globalData.Router()来跳转页面了
//跳转至test页面
getApp().globalData.Router('test')
4. 最后在空白页面redirectRouter中接收传入的参数跳转至指定路由
注意这里必须用uni.redirectTo来跳转路由,原因是通过此方法跳转页面后用户返回就不会返回到这个页面而是直接返回到了上一个页面
onLoad(option) {
uni.redirectTo({
url: `../${option.route}/${option.route}`
})
}
总结
uniapp中无数坑之一，由于使用我这种开发模式的人较少所以问题只能自己去摸索解决。准备去拥抱比较友好的flutter了
❝不断成长中,且行且珍惜
❞
