前言

哈嘍大家好，本期是微信小程序?qū)诘谑似凇１酒谥饕獌?nèi)容是動態(tài)設(shè)置導(dǎo)航欄標(biāo)題。導(dǎo)航欄是頁面最頂部的一塊區(qū)域。本期使用兩種方法來實現(xiàn)動態(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或者頁面的json文件配置導(dǎo)航欄標(biāo)題。如果是在app.json中進(jìn)行配置，則它是全局行為，項目所有的頁面將顯示同一個標(biāo)題；如果是在頁面的json中進(jìn)行配置，則只會影響當(dāng)前頁面。

實現(xiàn)步驟

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

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

效果圖

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

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

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

如下，我們在post-detail.js中添加如下代碼。其中wx.setNavigationBarTitle方法接收一個object參數(shù)。

效果圖

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

總結(jié)

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

最新評論