How to set the text in the upper right corner of the title through uniapp

In uniapp development, setting the text in the upper right corner of the title is usually used to display some important prompt information or provide some quick access. This article will introduce how to set the text in the upper right corner of the title through uniapp.

1. Set the style of the navigation bar in the configuration file

First, select the manifest.json configuration file in the uniapp project and find globalStyle field, which is used to set the global style of the application. You can add the navigationStyle attribute in it to configure the style of the navigation bar. Further, we can set the default style or the custom style. Now, let’s take the default style as an example:

{
  "globalStyle": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "标题",
    "navigationStyle": "default"
  }
}

2. Set the navigation bar style and upper right corner text on the page

Next, in the specific page, We can set the navigation bar style and upper right corner text by adding the setNavigationBarTitle method. Among them, we need to set the title content for the title attribute; at the same time, we can add the success callback function to monitor whether the setting is successful.

export default {
  onReady() {
    uni.setNavigationBarTitle({
      title: '页面标题',
      success() {
        console.log('设置成功')
      }
    })
  }
}

In addition, we can also set the navigation bar color, text color and other related styles by adding the setNavigationBarColor method:

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景颜色
  backgroundColor: '#000000', // 背景颜色
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})

3. Set the navigation bar style in the application And the text in the upper right corner

Finally, we can set the global navigation bar style and upper right corner text of the application through the App.vue script file. Just add the setNavigationBarTitle and setNavigationBarColor methods in the onLaunch function:

export default {
  onLaunch: function() {
    uni.setNavigationBarTitle({
      title: '应用标题'
    })

    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000'
    })
  }
}

At this point, we have successfully set the upper right corner text of the title through uniapp . It should be noted that in order to prevent multiple pages from repeatedly setting the same navigation bar properties, it is strongly recommended to conduct unified management and settings in the application.

Summary

Through the introduction of this article, we have a detailed understanding of how uniapp sets the text in the upper right corner of the title. It should be noted that when setting the navigation bar style and related attributes, we need to choose the corresponding method according to specific needs. At the same time, since this attribute is very important to the overall experience of the application user, it needs to be as consistent as possible and should be followed. Related design rules.

The above is the detailed content of How to set the text in the upper right corner of the title through uniapp. For more information, please follow other related articles on the PHP Chinese website!