Display effect of uniapp page title

One 、 Title display and no display  

By default, the page displays the title , If the title is not displayed , Just add " navigationStyle":"custom "

"globalStyle": {
		//  The title at the top of the page shows 
		// "navigationStyle":"custom",
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#ff0000",
		"backgroundColor": "#0055ff"
}

Two 、 Title Dynamic change display

You need to dynamically change the title of the page , Just add the following methods , Variable title The content in can be changed into dynamic variables from the back end , So as to realize the dynamic change of the title .

uni.setNavigationBarTitle({
	title:"uniapp Study "
});

  3、 ... and 、 Title transparent gradient display effect

After sliding a certain distance on the page , The effect of gradient display of page title , Just in pages.json In file , Make the following configuration ：

"pages": [ //pages The first item in the array represents the application startup page , Reference resources ：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": " The title shows ",
				"app-plus":{
				   "bounce":"none" ,
					"titleNView": {
						"backgroundColor": "#ff0000",// Displayed background color 
						"type": "transparent" // Transparent gradient navigation bar 
					}
				 }
			}
		}
	],

The effect is as follows ：