微信小程式window導覽列配置（實例詳解）

這篇文章為大家帶來了關於微信小程式的相關知識，其中主要介紹了關於windows導覽列配置的相關內容，以下就詳細介紹如何設定我們的window 導覽列，希望對大家有幫助。

【相關學習推薦：小程式學習教學】

介紹一下在wxss 中我們rpx 的應用以及我們對於小程式全域樣式以及局部樣式的配置，然後我們將詳細介紹如何配置我們的window 導覽列。

• 關於rpx 介紹

  #1. 我們在先前進行HTML 學習中了解px（解析度）這一個單位，在我們設定元件常用到，那麼在微信小程式中我們用的分辨單位是什麼呢？那就是rpx，那他有什麼特別的呢，值得專門設定它？

  2. rpx 是微信小程式特有的，解決螢幕自適應的尺寸單位，可以根據螢幕寬度進行自適應,不論大小螢幕,規定螢幕寬為750rpx 透過rpx 設定元素和字體的大小,小程式在不同尺寸的螢幕下,可以實現自動適配rpx 和px之間的換算

  <span style="font-size: 14px;">特別的在我們微信小程式開發中，我們前面提到推薦使用iPhone 6 進行開發，因為iPhone 的px =375，那麼我們2 rpx= 1 px</span>

• 關於全局配置和局部配置

  關於全局配置和局部配置我們前面也是以及介紹完畢，感興趣的小伙伴可以前面考古一下！下面我會專門講一下在 全域設定中常用的設定項！

一、全域設定的常用設定項

老規矩先用表格展示一下。

##tabBar 設定小程式底部的tabBar 效果style是否啟用新版的元件的選項

配置項目名稱	作用
pages	存放目前小程式所有頁面的存放路徑
window	#設定小程式視窗的外觀

• pages 我們前面也介紹過，我們當時為了顯示我們list 頁面，我們將pages 的第一條路徑改為我們list 的路徑，然後我們的微信小程式的頁面就是顯示我們的list 的內容了

• window 和tabBar 我們接下來看一幅圖篇，他介紹了我們這幾個配置所使用的區域

• style 咱們前面在介紹button 的時候也帶大家看過，當我們將style 刪除時，我們的組件樣式就變成老版本的

##作用圖解

• 

#二、window 導覽列

我們window 導覽列的設定包含了我們前面圖片展示的前兩個區域，我們接下來先介紹一下我們window 節點常見的設定項目。

屬性名稱#navigationBarTitleTextnavigationBarBackgroundColor#navigationBarTextStylebackgroundColor#backgroundTextStyleenablePullDownRefreshonReachBottomDistance

我們上述的所有設定都是在 app.json 內的 window 裡面進行設定！ ！ ！接下來我來示範 navigationBarTitleText 和 下拉相關屬性 ，剩下的設定項目大家可以自行嘗試！

2.1 navigationBarTitleText 設定項目

話不多說開始操作！

• 開啟app.json ，找到window

• #在window 中我們可以看到下面預設的設定項目

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
   },

• 我們可以看到第三行的navigationBarTitleText 即為我們的導覽列標題內容的配置，預設為Weixin ，例如我改為「皮皮的小屋」

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black"
   },

• 效果展示：

  

#2.2 下拉刷新的設定

關於下拉刷新我相信大家一定經常使用，例如我們使用手機時卡頓了，那麼我們習慣性動作就是向下拉動螢幕，這樣我們的頁面就會重新加載，那我們要如何實作功能呢？

• 首先開啟app.json 進入window 配置，開啟下拉功能

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffa",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
   },

• ##在最後一行我們將enablePullDownRefresh 設定為true 即可

• 效果展示：

  

至此我們對於這些配置就進行了簡單的介紹，我們在自行嘗試這些配置項的時候需要注意的就是我們onReachBottomDistance ，他的上拉觸底的意思就是我們平時刷購物平台的時候，當我們刷新到離底部一定距離的時候，頁面會自動刷新下面的數據，我們就是透過onReachBottomDistance 設定自動刷新的位置##【相關學習推薦：

小程式學習教學

】

類型	預設值	作用
string	字字串	#導覽列標題內容
Hexcolor	#000000	設定導覽列背景顏色（例如螢幕黃色#ffa）
string	white	設定導覽列標題的顏色（只含有黑色和白色）
#Hexcolor	#ffffff	視窗的背景顏色
string	dark	設定下拉loading 的樣式僅支援dark/light
Boolean	false	是否全域開啟下拉刷新
Number	50	頁面上拉觸底事件觸發閾值（在頁面底部距離單位為px ）

以上是微信小程式window導覽列配置（實例詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！