前言

哈嘍大家好，本期是微信小程序專欄第十八期。本期主要內容是動態(tài)設置導航欄標題。導航欄是頁面最頂部的一塊區(qū)域。本期使用兩種方法來實現(xiàn)動態(tài)導航欄標題的設置，分別是使用配置文件配置導航欄標題和使用wx.setNavigationBarTitle(OBJECT)設置導航欄。
每期內容是連載呢，建議大家可以看看往期內容，更好理解噢~

使用配置文件配置導航欄標題

這種方法是使用app.json或者頁面的json文件配置導航欄標題。如果是在app.json中進行配置，則它是全局行為，項目所有的頁面將顯示同一個標題；如果是在頁面的json中進行配置，則只會影響當前頁面。

實現(xiàn)步驟

這里我們設置window的app.json為例。使用navigationBarBackgroundColor設置導航欄的顏色，使用navigationBarTitleText指定導航欄標題文字，使用navigationBarTextStyle指定導航欄標題文字的顏色。

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

效果圖

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

使用wx.setNavigationBarTitle(OBJECT)設置導航欄

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

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

效果圖

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

總結

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

最新評論