What to do if uniapp jumps to a blank tabbar

With the popularity of mobile Internet, mobile applications have become an indispensable part of people's lives. Today, developing a mobile application no longer requires starting from scratch, but can be quickly developed through uniapp to achieve cross-platform functionality. However, during the development process using uniapp, sometimes we encounter the problem of jumping to the tabbar blank. This article will introduce you to the specific solutions.

1. Problem phenomenon

When using uniapp to develop cross-platform applications, we will use tabbar to implement the bottom navigation bar. But sometimes we will find that when we click the tabbar on one page to switch to another page, a blank page will appear on the new page, not the page we expected. This problem is very troubling, let’s discuss the solution together.

2. Cause of the problem

First of all, we need to understand the possible causes of this problem. When we use uniapp to develop, in each page, there will be an App.vue component. This component is the outermost structure of all pages, so it is responsible for rendering the entire application. When we use tabbar to switch routes, the route jump will trigger the hook function of App.vue, but because the route switching speed is very fast, when App.vue is ready to render content on a new page, the new page has already We are ready, but at this time because the component has not been rendered, we can only see a blank page.

3. Solutions

Below, we will introduce several solutions to solve the problem of blank tabbar.

1. Set page style

You can set min-height to the value of the height available for the current device in the

<style>
    page{
      min-height : calc(100% - 56px);
    }
</style>

In this way, we can set the height for the page in advance to avoid page flickering and improve the user experience. However, this method is only suitable for situations where the interface is relatively simple. If the interface is complex, this method may fail.

2. Use delayed jump

We can use the delayed jump method to give the page a certain amount of time to render during the route switching process, thereby avoiding blank spaces page appears.

this.$router.push({path: '/index'})
setTimeout(() => {
    this.show = true
}, 10)

By setting the delay function setTimeout, wait for the page to start rendering before displaying it, thereby avoiding the appearance of blank pages. It should be noted that this method may not have enough time, resulting in unsatisfactory rendering of the page.

3. Use the keep-alive tag

Another solution is to use the keep-alive tag. We add this tag to the App.vue component to cache all pages. When we switch routes, it will read page information from the cache, thus avoiding the appearance of blank pages.

<template>
  <div>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    <tab-bar></tab-bar>
  </div>
</template>

By using the keep-alive tag and the exclude attribute, we can exclude the tabbar from the cache, effectively solving the problem of blank tabbar. This method is relatively stable and suitable for applications with frequent user operations.

4. Summary

When developing uniapp mobile applications, the problem of blank tabbar is relatively common. Therefore, developers need to correctly understand the cause of the problem and take the correct solution. This article introduces three solutions. Developers can choose the appropriate method according to the specific circumstances of the project. Optimizing user experience is one of the issues that developers should consider. I hope this article can be helpful to everyone.

The above is the detailed content of What to do if uniapp jumps to a blank tabbar. For more information, please follow other related articles on the PHP Chinese website!