uniapp页面标题显示效果

一、标题显示与不显示 

页面默认是显示标题的，不显示标题的话，只需添加 " navigationStyle":"custom "

"globalStyle": {
		// 页面顶部标题显示
		// "navigationStyle":"custom",
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#ff0000",
		"backgroundColor": "#0055ff"
}

二、标题动态改变显示

需要动态改变页面的标题，只需添加以下方法，变量title里的内容可以改为后端取来的动态变量，从而实现标题的动态改变。

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

 三、标题透明渐变显示效果

实现页面上滑动一定距离后，页面标题渐变显示的效果，只需在pages.json文件中，做如下的配置：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "标题显示",
				"app-plus":{
				   "bounce":"none" ,
					"titleNView": {
						"backgroundColor": "#ff0000",//显现的背景色
						"type": "transparent" //透明渐变导航栏
					}
				 }
			}
		}
	],

效果如下：