首頁 > 文章 > 微信小程式 > 微信小程式實例：自訂導覽列的實作方法

微信小程式實例：自訂導覽列的實作方法

不言原創: 2018-08-21 17:29:124885瀏覽

本篇文章帶給大家的內容是關於微信小程式實例：自訂導覽列的實作方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在微信小程式中，導覽列的顏色、文案一些屬性可以在app.json中window裡面設定, 也可以在單一page裡面設定, 如果是在某一個page的json文件裡面配置, 需要去掉window , 例如在app.json配置:

{
    "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black",
       "navigationStyle": "custom"
     } }

在某一個page的json文件配置:

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "文与字",
  "navigationBarTextStyle": "white"}

詳細的可以參考官方文檔: https://developers. weixin.qq.com/miniprogram/dev/framework/config.html

但有時候業務需要的導覽列比較特別, 小程式的提供的導覽列不能滿足需求, 這時只能自訂了.

先說一下自訂導覽列的步驟:

在app.json裡面的window增加」navigationStyle」: “custom”,屬性(預設屬性是”navigationStyle”: “default”) , 這時小程式預設的導覽列就會消失了, 如圖所示:
接著就是根據自己的需要在每個page裡面新增自己的導覽列.

注意：navigationStyle 只在app.json 中生效。開啟 custom 後，低版本用戶端需要相容。開發者工具基礎庫版本切到1.7.0（不代表最低版本，只供調試用）可方便切到舊視覺.
#就是說這個屬性只能在app.json裡面配置, 如果你想在單一page裡面自訂導覽列是不行的, 必須是所有的page都要自訂導覽列, 個人覺得這是比較坑的, 可能小程式以後會優化吧.

微信小程式實例：自訂導覽列的實作方法

相關文章