首頁 >微信小程式 >小程式開發 >微信小程式實例:自訂導覽列的實作方法

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

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

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

在微信小程式中,導覽列的顏色、文案一些屬性可以在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都要自訂導覽列, 個人覺得這是比較坑的, 可能小程式以後會優化吧.

相關推薦:

小程式實例:小程式分頁載入資料的實作程式碼

微信小程式實例:點選事件與長按事件的程式碼實作

小程式中button以及捲軸預設樣式如何清除(程式碼)

以上是微信小程式實例:自訂導覽列的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn