亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2023年06月12日 14:30:47   作者：Ciao_Traveler  
uniapp作為一款開源軟件,可以做到一端多用,不過也有局限,在開發(fā)中有時候需要動態(tài)的去修改標題,下面這篇文章主要給大家介紹了關于uni-app動態(tài)修改導航欄標題的相關資料,需要的朋友可以參考下

對導航欄標題進行修改，直接使用就可以

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

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

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

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

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

data(){
	return {
		headerTitle:"",//導航欄的標題
	}
}

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

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

最后，需要在onReady中進行設置標題，??onReady中沒有接收的參數(shù)

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

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

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

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

總結

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

相關文章

最新評論