#author("2022-12-17T14:19:28+08:00","default:Admin","Admin")
#author("2022-12-17T14:20:42+08:00","default:Admin","Admin")
[[uni-app]]

&color(red){※前提条件:vue3 的uniapp开发};

#contents

*Tips [#zc2d0d4c]

** 修改标题文字 [#k7d88303]

pages.json 文件如下修改 navigationBarTitleText 的值

#codeprettify{{
{ //用户登陆
	"path": "pages/user/login",
	"name": "login",
	"aliasPath": "/", //对于h5端你必须在首页加上aliasPath并设置为/
	"style": {
		"navigationBarTitleText": "用户登陆"
	},
	"meta": {
		"auth": false
	}
},
}}

** 动态修改标题 [#b1a21385]

#codeprettify{{

export default {
	data() {
		return {
			dynamicTitle: '这里是动态标题',
		};
	},
	onLoad() {
		// 官网API:https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
		uni.setNavigationBarTitle({
			title: this.dynamicTitle,
			success: () => {
				console.log('修改标题成功')
			},
			fail: () => {
				console.log('修改标题失败')
			},
			complete: () => {
				console.log('修改标题结束')
			},
		})
	}
}
}}
** 去掉标题栏 [#hfbb4640]

uniapp发布H5时,如果不去掉标题栏,那么在微信打开就会造成页面有两个标题栏。

*** 取消某一页面的标题栏 [#z92af26e]

pages.json 的页面里,如下添加 "titleNView": false

#codeprettify{{
{ //错误-404
	"path": "pages/error/404",
	"name": "error404",
	"style": {
		"app-plus": {
			"titleNView": false
		}
	},
	"meta": {
		"auth": false
	}
}
}}

*** 取消所有页面的标题栏 [#z92af26e]

pages.json 的页面 globalStyle 里,如下添加

#codeprettify{{
"globalStyle": {
    "navigationStyle":"custom",//禁用原生导航
}
}}

#hr();
Comment:
#comment_kcaptcha

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS