How to set the title bar in uniapp

Uni-app is a cross-platform framework for multi-terminal development. It supports WeChat, Alipay, Baidu, Toutiao and other small program platforms as well as APP and H5. In the process of developing Uni-app, it is very important to design the UI interface of the App, and the title bar is an indispensable part of the interface design. In this article, we will introduce in detail the methods and techniques on how to set the title bar in Uni-app.

1. Default title bar

After we create a new Uni-app project, we will find that the default page already contains a title bar. The title bar usually displays the title of the page and a back button. It should be noted that the title bar style may be different on different platforms and will only take effect in the respective platforms.

2. Modify the default title bar

If the style of the default title bar does not meet our needs, we can achieve the effect of changing the title bar by modifying the style file. Open the App.vue file in the entire uni-app project, find the style setting section of the global navigation bar (usually at the bottom), and add the required styles, such as modifying the title bar background, text color, icon, etc. that need to be modified .

3. Customize the title bar

In addition to modifying the style of the default title bar, we can also customize a brand new title bar as needed. The specific method is as follows:

1. In the .vue file of the page, add an area as a container for the custom title bar.
2. Add the required components in this area, such as icons, buttons, text, etc.
3. Set the custom title bar style in the page's style file, such as width, height, position, etc.
4. Write event listening functions in the script file of the page, such as click events, return events, etc.

Through the above steps, we can easily customize a title bar that meets our needs.

4. Setting the title bar height

The height of the title bar may vary depending on different platforms. In order to ensure a clean and beautiful interface, we need to set an appropriate height for the title bar. In Uni-app, we can achieve this by modifying the style file.

The title bar heights of different platforms are as follows:

• WeChat mini program: 48px;
• Alipay mini program: 56px;
• Toutiao mini program : 56px;
• Baidu Mini Program: 40px;
• APP: 44px;
• H5: 56px.

In the style file, we can use the following code to set the title bar height for different platforms:

/* 微信小程序 */
.uni-page-head {
  height: 48px;
}

/* 支付宝小程序 */
.ap-wrapper .a-page-header {
  height: 56px;
}

/* 头条小程序 */
.bytedance-page-head,
.bytedance-page-head-fixed {
  height: 56px;
}

/* 百度小程序 */
.swan-navigation-bar {
  height: 40px !important;
}

/* APP */
.u-header {
  height: 44px;
}

/* H5 */
header {
  height: 56px;
}

5. Centering of the title bar text

In the title In the column, there is usually some text that needs to be displayed in the center, such as the page title. By default, Uni-app aligns the title bar text to the left. If you need to center the title bar text, we can do it through the following method:

1. Add a text container in the custom title bar.
2. Add the text that needs to be centered in the text container.
3. Add the following style to the text container:

text-align: center;

In this way, the text in the title bar can be centered.

The above are the methods and techniques for setting the title bar in Uni-app. I hope it will be helpful to Uni-app developers. In actual development, the title bar style design needs to be based on specific needs to achieve a better user experience.

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