快捷導(dǎo)航

微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟

更新時(shí)間：2023年02月09日 10:55:25 作者：顏顏yan_

實(shí)際開(kāi)發(fā)中很多時(shí)候我們需要通過(guò)上個(gè)頁(yè)面?zhèn)鬟^(guò)來(lái)的值動(dòng)態(tài)的更改標(biāo)題欄文字,下面這篇文章主要給大家介紹了關(guān)于微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟,需要的朋友可以參考下

前言

哈嘍大家好，本期是微信小程序?qū)诘谑似凇１酒谥饕獌?nèi)容是動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題。導(dǎo)航欄是頁(yè)面最頂部的一塊區(qū)域。本期使用兩種方法來(lái)實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄標(biāo)題的設(shè)置，分別是使用配置文件配置導(dǎo)航欄標(biāo)題和使用wx.setNavigationBarTitle(OBJECT)設(shè)置導(dǎo)航欄。
每期內(nèi)容是連載呢，建議大家可以看看往期內(nèi)容，更好理解噢~

使用配置文件配置導(dǎo)航欄標(biāo)題

這種方法是使用app.json或者頁(yè)面的json文件配置導(dǎo)航欄標(biāo)題。如果是在app.json中進(jìn)行配置，則它是全局行為，項(xiàng)目所有的頁(yè)面將顯示同一個(gè)標(biāo)題；如果是在頁(yè)面的json中進(jìn)行配置，則只會(huì)影響當(dāng)前頁(yè)面。

實(shí)現(xiàn)步驟

這里我們?cè)O(shè)置window的app.json為例。使用navigationBarBackgroundColor設(shè)置導(dǎo)航欄的顏色，使用navigationBarTitleText指定導(dǎo)航欄標(biāo)題文字，使用navigationBarTextStyle指定導(dǎo)航欄標(biāo)題文字的顏色。

注意：navigationBarTextStyle只支持black和white兩個(gè)顏色，默認(rèn)值為black。

效果圖

保存后就會(huì)發(fā)現(xiàn)所有頁(yè)面的導(dǎo)航欄都是一樣的，如果不同頁(yè)面需要使用不同的導(dǎo)航欄，則只需在頁(yè)面的json中添加相應(yīng)屬性即可。

使用wx.setNavigationBarTitle(OBJECT)設(shè)置導(dǎo)航欄

這個(gè)方法可以使導(dǎo)航欄的文字根據(jù)頁(yè)面內(nèi)容的不同而變化。小程序提供了wx.setNavigationBarTitle(OBJECT)來(lái)動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題。官方文檔指出，頁(yè)面的導(dǎo)航欄標(biāo)題必須在頁(yè)面生命周期的onReady之后來(lái)設(shè)置，否則無(wú)效。

如下，我們?cè)趐ost-detail.js中添加如下代碼。其中wx.setNavigationBarTitle方法接收一個(gè)object參數(shù)。

效果圖

保存代碼，就可以發(fā)現(xiàn)頁(yè)面的導(dǎo)航欄文字變成了文章的標(biāo)題。

總結(jié)

到此這篇關(guān)于微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的文章就介紹到這了,更多相關(guān)微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: