search
HomeWeb Front-enduni-appHow 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.

  1. 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.

  1. 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>
      <uni-icons></uni-icons>
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToIndex() {
      uni.redirectTo({
        url: &#39;/pages/index/index&#39;
      });
    }
  }
}
</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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor