快捷導(dǎo)航

uni-app動態(tài)修改導(dǎo)航欄標(biāo)題簡單步驟

更新時間：2023年06月12日 14:30:47 作者：Ciao_Traveler

uniapp作為一款開源軟件,可以做到一端多用,不過也有局限,在開發(fā)中有時候需要動態(tài)的去修改標(biāo)題,下面這篇文章主要給大家介紹了關(guān)于uni-app動態(tài)修改導(dǎo)航欄標(biāo)題的相關(guān)資料,需要的朋友可以參考下

對導(dǎo)航欄標(biāo)題進(jìn)行修改，直接使用就可以

uni.setNavigationBarTitle({
    title: "標(biāo)題名稱"
});

動態(tài)修改標(biāo)題名稱，數(shù)據(jù)可能是從上一個頁面?zhèn)鬟f過來的，直接在onLoad頁面周期函數(shù)中使用

onLoad(props) {
	console.log(props,"onLoad");//獲取上一個頁面?zhèn)鬟f的數(shù)據(jù)
	if (props?.title) {
        const titleType = props.title;
        let barTitle = "預(yù)約會議";
        switch (titleType) {
          case "order":
            barTitle = '預(yù)約會議';
            break;
          case "create":
            barTitle = '創(chuàng)建會議';
            break;
          case "edit":
            barTitle = '編輯會議';
            break;
          default:
            break;
        }
        uni.setNavigationBarTitle({
        	title: barTitle
      	});
   	}
}

??可能會出現(xiàn)在網(wǎng)頁中切換標(biāo)題正常，但是在真機中沒有效果，通過查看官網(wǎng)看到這么一句話

如果需要在頁面進(jìn)入時設(shè)置標(biāo)題，可以在onReady內(nèi)執(zhí)行，以避免被框架內(nèi)的修改所覆蓋。如果必須onShow內(nèi)執(zhí)行需要延遲一小段時間
打印頁面生命周期發(fā)現(xiàn)onLoad先于onReady執(zhí)行，所以即使數(shù)據(jù)是上一個頁面?zhèn)鬟f過來的，也不會影響標(biāo)題的展示。
第一步，我們可以在data中定義一個變量headerTitle

data(){
	return {
		headerTitle:"",//導(dǎo)航欄的標(biāo)題
	}
}

第二步，在onLoad頁面周期中去獲取上一個頁面?zhèn)鬟f的參數(shù)，然后對headerTitle進(jìn)行賦值，方便我們接下來的使用

onLoad(props) {
	console.log(props,"onLoad");//獲取上一個頁面?zhèn)鬟f的數(shù)據(jù)
	if (props?.title) {
        const titleType = props.title;
        let barTitle = "預(yù)約會議";
        switch (titleType) {
          case "order":
            barTitle = '預(yù)約會議';
            break;
          case "create":
            barTitle = '創(chuàng)建會議';
            break;
          case "edit":
            barTitle = '編輯會議';
            break;
          default:
            break;
        }
       this.headerTitle=barTitle
   	}
}

最后，需要在onReady中進(jìn)行設(shè)置標(biāo)題，??onReady中沒有接收的參數(shù)

onReady(){
	 uni.setNavigationBarTitle({
        title: this.headerTitle
     });
}

通過借助兩個頁面周期函數(shù)，可以實現(xiàn)動態(tài)修改導(dǎo)航欄標(biāo)題

上一個頁面?zhèn)鬟f的參數(shù)

const type = 'create';//傳遞給下一個頁面的參數(shù)
uni.navigateTo({
   url: `/pages/bookAMeeting/index?title=${type}`
})

總結(jié)

到此這篇關(guān)于uni-app動態(tài)修改導(dǎo)航欄標(biāo)題的文章就介紹到這了,更多相關(guān)uni-app動態(tài)修改導(dǎo)航欄標(biāo)題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: