preface

The project is running on an Android tablet and has been set to landscape mode with a hidden status bar and a virtual button at the bottom with code attached

// Set landscape mode pages.json
"globalStyle": {
    "pageOrientation": "landscape"
}
// Set the full-screen mode to app. vue using h5+ API
plus.navigator.hideSystemNavigation() Copy the code

Problem description

NavigateTo (uni. RedirectTo) navigateTo (uni. RedirectTo) (uni

I came across a case in Dcload that was in the same situation as me. Here I quote the picture directly for convenience

You can see that after jumping from page A to page B, the bottom is truncated exactly the height of the virtual button at the bottom, and it shows the bottom of page A. Confirmed as a bug official feedback fruitless

The solution

Uni. NavigateTo has default animation. It works normally after animation is disabled. But the experience without the jump animation was terrible, and the final solution came to me by accident.

Jump to a transparent empty page before jumping to the specified page and then jump to the specified page during the initialization of the empty page will not trigger the bug and retain the animation effect, and then encapsulate the perfect solution, paste the code

steps

1. Create a blank and transparent pageredirectRouter.nvue
<template>
 <div class="container"></div>
</template>

<script>
export default {  onLoad(option) { . } } </script>  <style scoped lang="stylus"> .container  opacity 0 </style> Copy the code

Set this in pages. Json

{
    "path" : "pages/redirectRouter/redirectRouter".    "style" : {
      "app-plus": {
        "background": "transparent"
 }  } } Copy the code
2. Encapsulate a redirect method in your utility class
/ * ** Jump to the transparent page and then to the specified route* @param {string} route Specifies the route* /
const Router = (route) = > {
 delayFunc((a)= > {  // The throttling function is used to prevent double - click penalties  uni.navigateTo({  url: ".. /redirectRouter/redirectRouter? route=" + route,  animationType: 'zoom-fade-out'. animationDuration: 0 // Adjust the animation time to 0 to jump to the specified route faster  })  }) } // throttling function let lastScrollCall const delayFunc = (fn) = > {  const now = new Date().getTime()  if (now - lastScrollCall < 1400) return  lastScrollCall = now  setTimeout((a)= > { fn() }, 60) } Copy the code

Import your utility class from main.js and attach it to vue. prototype. I won’t post the code here because vue. prototype is not available in the nvUE project page, So mount your utility classes to getApp().globalData in app.vue

// This assumes that the Router is already mounted to Vue.prototypegetApp().globalData.Router() = this.Router()
Copy the code
3. You can pass nowgetApp().globalData.Router()It’s time to jump to the page
/ / jump totestpagegetApp().globalData.Router('test')
Copy the code
4. Finally on the blank pageredirectRouterTo jump to the specified route

Note that uni. RedirectTo must be used to redirect the route, because the user does not return to this page but to the previous page

onLoad(option) {
 uni.redirectTo({
    url: `.. /${option.route}/${option.route}`
 })
}
Copy the code

conclusion

Uniapp is one of the numerous pits. Since there are few people using my development mode, I have to find and solve the problem by myself. Ready to embrace the friendlier Flutter

❝

Growing, and line and cherish

❞