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
- 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.
- 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.
- 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: '/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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

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
Small size, syntax highlighting, does not support code prompt function

SublimeText3 English version
Recommended: Win version, supports code prompts!

SublimeText3 Linux new version
SublimeText3 Linux latest version

Notepad++7.3.1
Easy-to-use and free code editor
