Close the top bar on the uniapp startup page

In recent years, with the rapid development of mobile Internet, the development of various mobile applications and small programs has become more and more popular. As a modern development framework, Uniapp can develop multiple platforms at the same time and is very popular among developers. However, during the development of Uniapp, sometimes we need to close the top bar of the startup page, and this is not easy to do.

In this article, we will explore how to close the top bar in Uniapp’s startup page. This will help developers better master Uniapp development skills.

1. Uniapp startup page

Before we start talking about how to close the top bar of the Uniapp startup page, we need to first understand the Uniapp startup page.

The Uniapp startup page refers to the welcome interface when the APP or mini program is opened for the first time. Its design is beautiful, simple, and intuitive. The role of the startup page is to help users become better familiar with our application and provide users with a meaningful information interface when the program starts.

In Uniapp, we can set the startup page by setting "appLaunch": true in the manifest.json file, as shown below:

{
  "appLaunch": true,
  "pages": [
    "pages/home/home"
  ]
}

2. Close the top bar of the Uniapp startup page

Sometimes, we want to close the top bar in the Uniapp startup page to make the page more concise and beautiful. However, in actual development, we found that closing the top bar was not that easy.

After some research and attempts, we found that we can close the top bar of the Uniapp startup page through the following two methods:

1. Set the navigationBarHidden property to true in App.vue

In Uniapp's App.vue file, we can close the top bar by setting the navigationBarHidden property to true. The sample code is as follows:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      navigationBarHidden: true // 隐藏顶部栏
    }
  }
}
</script>

Among them, the default value of the navigationBarHidden property is false. , which displays the top bar. When set to true, the top bar will be hidden.

2. Set the style of the top bar in the style tag of App.vue

If we want to precisely control the style of the top bar, such as changing the background color or font color, We can set the style of the top bar in the style tag of the App.vue file. The sample code is as follows:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style>
/* 关闭顶部栏 */
.uni-page-head {
  display: none;
}
</style>

In this example, we turn off the top bar by setting the display property of .uni-page-head. The advantage of this method is that it can precisely control the style of the top bar, but the disadvantage is that it requires rewriting the style.

3. Summary

In Uniapp development, the design of the startup page is an important link. Through the method described in this article, closing the top bar on the Uniapp startup page can make our page more concise and beautiful. We can achieve this by setting the navigationBarHidden attribute or setting the display attribute of .uni-page-head in the style.

In short, Uniapp, as a modern development framework, is powerful, flexible and very suitable for the development of mobile applications. In actual development, we need to continuously and in-depth study the related technologies of Uniapp in order to better master the development skills of Uniapp.

The above is the detailed content of Close the top bar on the uniapp startup page. For more information, please follow other related articles on the PHP Chinese website!