How to set the back button in the uniapp native title bar

As we all know, uniapp is a cross-platform, multi-end front-end framework written at once. When using uniapp to develop mobile APPs, we often need to add title bars and return buttons. uniapp provides a unified title bar and return button by default, but in actual development, we often need to personalize the title bar and return button. This article will introduce how to set the back button in the native title bar of uniapp.

1. uniapp native title bar and return button

In uniapp, you can set the page title by configuring the page's "navigationBarTitleText". At the same time, in page routing, you can use "navigationBarBackgroundColor", "navigationBarTextStyle" and other properties to set the background color and foreground color of the title bar.

The uniapp native title bar will automatically generate a return button, and display the corresponding arrow and text on the return button based on the depth relationship of the page routing.

2. Personalized settings of uniapp's native return button

If we want to personalize the return button, such as modifying the text and style of the button, we need to perform some special processing.

uniapp provides two APIs, "onNavigationBarButtonTap" and "setNavigationBarTitle", which can personalize the return button. We can use these two APIs in the life cycle method of the page to personalize the back button.

1. Modify the text of the return button

By calling the "onNavigationBarButtonTap" API, we can capture the click event of the return button and set the text of the return button in the event handling method .

Add the following code in the page "onLoad" method:

onLoad: function() {
  uni.showNavigationBarLoading()
  uni.onNavigationBarButtonTap(function(res) {
    console.log(res) // res.index 表示点击的按钮的索引，2 表示返回
  })
}

In the event handling method, we can modify the text of the return button by calling the "setNavigationBarTitle" API.

uni.setNavigationBarTitle({
    title: '自定义标题'
})

After the setting is completed, the text of the return button will become "Custom title".

2. Modify the style of the return button

If we want to modify the style of the return button, such as setting the icon, color and size of the return button, we need to use CSS style sheet.

In the CSS style sheet, we can style the back button in the following ways:

/* 修改返回按钮的图标 */
.page-navigation-bar .uni-icon-back {
  background-image: url(images/back.png);
}

/* 修改返回按钮的颜色 */
.page-navigation-bar .uni-tabbar-item-active {
  color: #007aff;
}

/* 修改返回按钮的大小 */
.page-navigation-bar .uni-tabbar-item-active {
  font-size: 30rpx;
}

3. Hide/Show the back button

If we want To hide the back button in some pages, you need to use the "setNavigationBar" API. Through this API, we can set the main title, subtitle and whether to display the back button.

// 隐藏返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: true
})

// 显示返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: false
})

The above is the personalized setting of the return button of uniapp's native title bar. Through simple API calls and CSS style sheet settings, we can easily modify the text, style and display state of the return button to achieve a visually unique title bar effect.

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