uniapp removes navigation text

In the uniapp development process, navigation is a very important part. It can help users better understand the location and functions of the current page. However, in some cases, we may need to remove navigation text. For example, in terms of design style, we need to make the page more concise and pure, and removing navigation text can achieve this goal. So, how to remove navigation text in uniapp?

Method 1: Hide navigation text in the page

In uniapp, the default navigation text is defined through the routing configuration file. For example, the following code:

"tabBar": {
    "color": "#999",
    "selectedColor": "#1aad19",
    "backgroundColor": "#fafafa",
    "borderStyle": "black",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }

You can see that the navigation text of each tab is defined in the "text" attribute. Therefore, we only need to hide this text in the page. The specific method is to set the text color in the style file to be the same as the background color, or set the font size of the text to 0. The code example is as follows:

<style>
  .uni-tab-item-text {
    font-size: 0;
  }
</style>

or

<style>
  .uni-tab-item-text {
    color: #fafafa;
  }
</style>

. The navigation text has been removed.

Method 2: Use plug-ins

If you don’t want to write your own code to remove navigation text, you can also use plug-ins in the uniapp community to achieve this. For example, the uni-simple-router plug-in allows you to remove navigation text very conveniently.

First of all, when using uni-simple-router, we need to introduce tags first. The specific method is to add the following code to the main.js file:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.$router = router

import 'uni-simple-router'

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

Then, in the routing configuration file, change the text attribute to the title attribute. In this way, uni-simple-router can take effect and automatically handle the navigation title issue. For example, the following code:

{
  path: '/home',
  component: () => import('@/pages/home'),
  meta: {
    title: '首页'
  }
},
{
  path: '/user',
  component: () => import('@/pages/user'),
  meta: {
    title: '我的'
  }
}

Finally, let’s take a look at how to use uni-simple-router to remove navigation text. In the page, we only need to add a life cycle function beforeEnter, and set the navigation text to empty in this function. The specific code is as follows:

<script>
export default {
  beforeEnter(to, from, next) {
    uni.showTabBar()
    uni.setNavigationBarTitle({
      title: ''
    })
    next()
  }
}
</script>

In this way, when the page jumps to this page, the title of the navigation bar will become empty. If you want to remove navigation text from all pages, you only need to define a beforeEnter function globally.

Summary:

Both of the above two methods allow us to remove navigation text. If you need to remove navigation text from a single page, use the first method; if you need to remove navigation text from all pages, use the second method more conveniently. Of course, there are other ways to achieve the same effect. In short, you can choose the method that suits you based on your actual needs and development methods.

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