uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題簡單步驟
對導(dǎo)航欄標(biāo)題進(jìn)行修改,直接使用就可以
uni.setNavigationBarTitle({ title: "標(biāo)題名稱" });
動(dòng)態(tài)修改標(biāo)題名稱,數(shù)據(jù)可能是從上一個(gè)頁面?zhèn)鬟f過來的,直接在onLoad
頁面周期函數(shù)中使用
onLoad(props) { console.log(props,"onLoad");//獲取上一個(gè)頁面?zhèn)鬟f的數(shù)據(jù) if (props?.title) { const titleType = props.title; let barTitle = "預(yù)約會(huì)議"; switch (titleType) { case "order": barTitle = '預(yù)約會(huì)議'; break; case "create": barTitle = '創(chuàng)建會(huì)議'; break; case "edit": barTitle = '編輯會(huì)議'; break; default: break; } uni.setNavigationBarTitle({ title: barTitle }); } }
??可能會(huì)出現(xiàn)在網(wǎng)頁中切換標(biāo)題正常,但是在真機(jī)中沒有效果,通過查看官網(wǎng)看到這么一句話
如果需要在頁面進(jìn)入時(shí)設(shè)置標(biāo)題,可以在
onReady
內(nèi)執(zhí)行,以避免被框架內(nèi)的修改所覆蓋。如果必須onShow
內(nèi)執(zhí)行需要延遲一小段時(shí)間
打印頁面生命周期發(fā)現(xiàn)onLoad
先于onReady
執(zhí)行,所以即使數(shù)據(jù)是上一個(gè)頁面?zhèn)鬟f過來的,也不會(huì)影響標(biāo)題的展示。
第一步,我們可以在data中定義一個(gè)變量headerTitle
data(){ return { headerTitle:"",//導(dǎo)航欄的標(biāo)題 } }
第二步,在onLoad
頁面周期中去獲取上一個(gè)頁面?zhèn)鬟f的參數(shù),然后對headerTitle
進(jìn)行賦值,方便我們接下來的使用
onLoad(props) { console.log(props,"onLoad");//獲取上一個(gè)頁面?zhèn)鬟f的數(shù)據(jù) if (props?.title) { const titleType = props.title; let barTitle = "預(yù)約會(huì)議"; switch (titleType) { case "order": barTitle = '預(yù)約會(huì)議'; break; case "create": barTitle = '創(chuàng)建會(huì)議'; break; case "edit": barTitle = '編輯會(huì)議'; break; default: break; } this.headerTitle=barTitle } }
最后,需要在onReady
中進(jìn)行設(shè)置標(biāo)題,??onReady中沒有接收的參數(shù)
onReady(){ uni.setNavigationBarTitle({ title: this.headerTitle }); }
通過借助兩個(gè)頁面周期函數(shù),可以實(shí)現(xiàn)動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題
上一個(gè)頁面?zhèn)鬟f的參數(shù)
const type = 'create';//傳遞給下一個(gè)頁面的參數(shù) uni.navigateTo({ url: `/pages/bookAMeeting/index?title=${type}` })
總結(jié)
到此這篇關(guān)于uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題的文章就介紹到這了,更多相關(guān)uni-app動(dòng)態(tài)修改導(dǎo)航欄標(biāo)題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條,可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程)2009-07-07javascript實(shí)現(xiàn)對表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實(shí)現(xiàn)對表格元素進(jìn)行排序操作,分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原,和排升序和降序的功能,文章末尾附完整代碼,感興趣的小伙伴們可以參考一下2015-11-11如何使用json在前后臺(tái)進(jìn)行數(shù)據(jù)傳輸實(shí)例介紹
需要把這些輸入寫入數(shù)據(jù)庫,這里就用到j(luò)son傳入,先看一下后臺(tái)如何生成要傳輸?shù)臄?shù)據(jù),感興趣的朋友可以參考下,希望可以幫助到你2013-04-04微信小程序?qū)崿F(xiàn)虎年春節(jié)頭像制作
春節(jié)來臨之際,看到有網(wǎng)友分享了網(wǎng)頁版的虎年頭像制作工具。本文將為大家介紹一個(gè)虎年春節(jié)頭像制作小程序,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-02-02javascript ES6中箭頭函數(shù)注意細(xì)節(jié)小結(jié)
這篇文章主要給大家總結(jié)了關(guān)于javascript ES6中箭頭函數(shù)注意細(xì)節(jié)的相關(guān)資料,文中介紹的比較詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02JavaScript判斷數(shù)據(jù)類型的四種方式總結(jié)
JavaScript 作為一門動(dòng)態(tài)語言,其靈活性是把雙刃劍,一方面帶來了開發(fā)的便利性,另一方面也給我們在類型判斷時(shí)帶來了挑戰(zhàn),特別是在處理類型轉(zhuǎn)換和隱式轉(zhuǎn)換的時(shí)候,所以本篇文章我們將探討 JavaScript 中的數(shù)據(jù)類型判斷方式及在實(shí)際項(xiàng)目中的應(yīng)用,需要的朋友可以參考下2025-04-04javascript中toFixed()四舍五入使用方法詳解
最近做的項(xiàng)目涉及到金額的計(jì)算,有一種方式就是進(jìn)行四舍五入的規(guī)則進(jìn)行小數(shù)點(diǎn)后面的尾數(shù)處理,以前一直以為toFixed方法就是四舍五入的,這里為大家分享一下2018-09-09JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中箭頭函數(shù)相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05