Take Taro for example:

Generally we customize the title bar, divided into two steps

  1. Hide the title bar

  2. In the configuration file index.config.js for each page

    export default{
    navigationStyle:'custom'
}
Copy the code

    Other small program configuration, such as navigationBarTitleText, can also be configured in each page, flexibility is very good

  3. Set the title section

For this part, we just need to write the header style we want, but we also need to calculate the height of the top status bar and the capsule section.

{statusBarHeight:' statusBarHeight ', 'statusBarHeight', 'statusBarHeight', 'statusBarHeight' Unit px' //} // Get the layout location information of the menu button (upper right capsule button). Coordinate information in the upper left screen for the origin of Taro. GetMenuButtonBoundingClientRect () / / units are px {height: the height of the capsule, top: 'upper boundary coordinates, the unit: px'}Copy the code

More detailed parameters can be found in the API, and the values above can be compared to the figure below.

Please correct any mistakes or omissions