Hide the top navigation bar on the uniapp homepage

In mobile application development, it is often necessary to hide certain elements on the page. For example, in uniapp, hiding the top navigation bar on the homepage is a common requirement. This article will introduce how to use the API provided by uniapp to implement this function.

In uniapp, the basic structure of all pages is as follows:

<code><template>
  <view class="container">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
  // 页面生命周期钩子函数
  onLoad() {},
  onReady() {},
  onShow() {},
  onHide() {},
  // ...
};
</script></code>

Among them, the <view class="container"> tag is used to wrap the content of the page, If you want to hide the top navigation bar, just add a special attribute navigation-bar-fixed on the <view> tag. Specifically, change the <view> tag to the following form:

<code><view class="container" navigation-bar-fixed>
  <!-- 页面内容 -->
</view></code>

In this way, the top navigation bar in the page will be hidden. It is important to note that since navigation-bar-fixed is a custom attribute, it must be defined in the style of the page, otherwise the navigation bar will not be hidden. The style is defined as follows:

<code><style>
.container {
  height: 100%; /* 设置页面容器高度为100% */
}
app-uni-status-bar,
app-uni-nav-bar,
page-body {
  display: none; /* 隐藏系统自带的顶部状态栏和导航栏 */
}
</style></code>

It should be noted that the app-uni-status-bar, app-uni-nav-bar and page-body respectively represent the top status bar, navigation bar and page content area that comes with the system. They need to be hidden at the same time to achieve a complete navigation bar hiding effect.

To sum up, by adding custom attributes and modifying the page style, we can easily implement the function of hiding the top navigation bar in uniapp.

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