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.
You can set min-height to the value of the height available for the current device in the
