Configuration and usage guide for UniApp to implement custom navigation bar and title bar

UniApp Configuration and Usage Guide for Implementing Custom Navigation Bar and Title Bar

1. Background Introduction
UniApp is a framework that supports the development of cross-platform applications using Vue.js. It integrates H5 The development capabilities of multiple platforms such as , App, and small programs greatly simplify the work of developers. In UniApp, navigation bar and title bar are common page elements. In this article, we will introduce how to configure and use custom navigation bar and title bar.

2. Configuration and use of custom navigation bar

1. Configuring the style of the navigation bar
   In UniApp, you can configure the navigation bar using global configuration or page configuration. style. Use the "navigationStyle" field in manifest.json to globally configure the navigation bar style. Optional values ​​include "default" (default style) and "custom" (custom style) , as shown below:

"globalStyle": {
  "navigationStyle": "custom"
}

In page configuration, you can use the "navigationStyle" field to configure the navigation bar style of a single page, and the optional value is "default" and "custom". This allows you to use different navigation bar styles on different pages.

2. Customized navigation bar
   By customizing the navigation bar, we can achieve a more personalized navigation bar style. In UniApp, you can use the Vue component to implement a custom navigation bar. The code is as follows:

<template>
  <view class="custom-navbar">
    <view class="left-btn" @click="onLeftClick">
      <image class="back-btn" src="your-back-image-url"></image>
    </view>
    <view class="title">{{ title }}</view>
    <view class="right-btn" @click="onRightClick">
      <image class="more-btn" src="your-more-image-url"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    onLeftClick() {
      // 处理左侧按钮点击事件
    },
    onRightClick() {
      // 处理右侧按钮点击事件
    }
  }
}
</script>

<style>
.custom-navbar {
  width: 100%;
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-btn,
.right-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn,
.more-btn {
  width: 20px;
  height: 20px;
}
</style>

In pages that need to use a custom navigation bar, use < custom-navbar :title="pageTitle"></custom-navbar> can introduce a custom navigation bar component and pass the title text through the title attribute. Just handle the click events of the left and right buttons in the methods of the component.

3. Configuration and use of custom title bar
In UniApp, you can customize the title bar by modifying the native navigation bar. UniApp provides APIs such as setNavigationBarTitle and setNavigationBarColor for configuring and modifying the style of the title bar.

1. Dynamic modification of title text
   UniApp provides the setNavigationBarTitle method for modifying the title text of the current page. Calling this method in the onLoad life cycle function of the page can dynamically modify the title text. The sample code is as follows:

export default {
  onLoad() {
    uni.setNavigationBarTitle({
      title: '新的标题'
    })
  }
}

2. Dynamic modification of the title bar style
   UniApp The setNavigationBarColor method is provided to modify the title bar style of the current page, including background color, text color, etc. The sample code is as follows:

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

You can call the setNavigationBarColor method in the onLoad life cycle function to modify the style of the title bar.

4. Summary
Through the introduction of this article, we have learned how to configure and use custom navigation bars and title bars in UniApp. By configuring the navigation bar style and using custom components, we can flexibly implement various styles of navigation bars. At the same time, the style of the title bar can be dynamically modified by calling the native API, increasing the interactivity of the page. I hope this article can be helpful to UniApp developers when building interfaces.

The above is the detailed content of Configuration and usage guide for UniApp to implement custom navigation bar and title bar. For more information, please follow other related articles on the PHP Chinese website!