How to cancel the top navigation in uniapp

In mobile applications, navigation bars are usually used to help users understand their current location and available navigation options. However, in some cases, eliminating the top navigation may better suit the needs of the application. In UNIAPP, canceling the top navigation is very simple. Next, we will introduce how to achieve it in detail.

Why cancel the top navigation?

Sometimes, the pages in the application do not require the top navigation bar, especially considering different application scenarios and user behaviors. It may be more in line with the user experience to cancel the top navigation bar. For example, when we want to create a simple full-screen slideshow, we don’t need a top navigation bar to distract the user, but need to focus more on the content of the slide itself.

Cancel the implementation of top navigation in UNIAPP

1. Set "navigationStyle": "custom" in manifest.json

Open the UNIAPP project manifest.json file, find the "navigationStyle" attribute under the "globalStyle" option. Modify it to "custom" as shown below:

"globalStyle": {
  "navigationStyle": "custom"
},

After setting "custom", the page will no longer display the default navigation bar.

2. Set padding-top in the page style

Because the default navigation bar has been cancelled, we need to add padding-top to the page to prevent the content from being blocked. You can add the following code to the style of the page:

page {
  padding-top: env(safe-area-inset-top);
}

By using this technique, we can prevent elements on the page from being covered, while also ensuring that the key information of our application is better highlighted.

3. Button event jump

After canceling the navigation bar, we need to implement the jump function in the page so that users can browse the entire application. But what we need to think about at this time is that canceling the navigation bar does not mean that we have to completely abandon the navigation function. Therefore, redefine a button and add event listeners in the JS code to implement the jump.

In UNIAPP, the button can be replaced by the icon provided by the uni-icons icon library. The code is as follows:

<template>
  <view>
    <button @tap="redirectToIndex" class="icon-btn">
      <uni-icons type="home" size="30"></uni-icons>
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToIndex() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.icon-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

The above code defines an "icon-btn" button and defines the floating Fixed positioning, the lower right corner is the operating position, and the rest of the styles are customized. When using this button, the page jump is mainly achieved through the uni.redirectTo() function in the JS event. This function closes the current page and redirects the user to the application's home page.

Summary

Canceling the top navigation of UNIAPP is very simple. We only need to set the navigationStyle attribute in the manifest.json file in the project, and then set the padding-top attribute in the page. Moreover, in order to implement the jump function, we can add a button and add a JS event to it to perform page operations in the application. With this approach, we can provide more freedom and opportunity to provide a better user experience for the users of the application.

The above is the detailed content of How to cancel the top navigation in uniapp. For more information, please follow other related articles on the PHP Chinese website!