Uniapp设置title
uniapp加载webview时导航title默认抓取页面title值,单页面不能设置独立title的问题;结合uni.postMessage以及plusMessage事件监听实现,如有更好的方案欢迎讨论。
1.pages.json配置
{
"path": "pages/test/index/index",
"style": {
"navigationBarTitleText": "测试页面"
}
2.动态设置
uni.setNavigationBarTitle({
title: '测试首页'
})
3.webview页面
- 有pages.json先显示
- 被webview页面title覆盖
webview如果是单页面应用只在首次加载后显示index.html的,想要对应页面差异化显示对应title可以结合<strong>uni.postMessage</strong>实现。<br>webview页面需要引用资源。在进入路由之前结合路由设置的title对用显示,如下:</li><li><p>webview页面</p> <p>router.beforeEach((to, from, next) => {</p> <pre><code>if (to.meta.title) { uni.postMessage({ data: { action: to.meta.title } }); } next(); </code></pre><p> });</p> </li><li><p>uniapp页面 监听plusMessage事件</p> <p>// #ifdef APP-PLUS<br> plus.globalEvent.addEventListener(‘plusMessage’, function(msg){ </p> <pre><code>if(msg.data.args.data.name == 'postMessage'){ uni.setNavigationBarTitle({ title: msg.data.args.data.arg.action}) } </code></pre><p> });<br>// #endif</p> </li></ul>
还没有评论,来说两句吧...