這篇文章為大家?guī)砹岁P(guān)於微信小程式的相關(guān)知識，其中主要介紹了關(guān)於windows導(dǎo)覽列配置的相關(guān)內(nèi)容，以下就詳細(xì)介紹如何設(shè)定我們的window 導(dǎo)覽列，希望對大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

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

• 關(guān)於rpx 介紹

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

  2. rpx 是微信小程式特有的，解決螢?zāi)蛔赃m應(yīng)的尺寸單位，可以根據(jù)螢?zāi)粚挾冗M(jìn)行自適應(yīng),不論大小螢?zāi)?規(guī)定螢?zāi)粚挒?50rpx 透過rpx 設(shè)定元素和字體的大小,小程式在不同尺寸的螢?zāi)幌?可以實現(xiàn)自動適配rpx 和px之間的換算

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

• 關(guān)於全局配置和局部配置

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

一、全域設(shè)定的常用設(shè)定項

老規(guī)矩先用表格展示一下。

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

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

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

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

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

##作用圖解

• 

#二、window 導(dǎo)覽列

我們window 導(dǎo)覽列的設(shè)定包含了我們前面圖片展示的前兩個區(qū)域，我們接下來先介紹一下我們window 節(jié)點常見的設(shè)定項目。

屬性名稱#navigationBarTitleTextnavigationBarBackgroundColor#navigationBarTextStylebackgroundColor#backgroundTextStyleenablePullDownRefreshonReachBottomDistance

我們上述的所有設(shè)定都是在 app.json 內(nèi)的 window 裡面進(jìn)行設(shè)定！ ！ ！接下來我來示範(fàn) navigationBarTitleText 和 下拉相關(guān)屬性 ，剩下的設(shè)定項目大家可以自行嘗試！

2.1 navigationBarTitleText 設(shè)定項目

話不多說開始操作！

• 開啟app.json ，找到window

• #在window 中我們可以看到下面預(yù)設(shè)的設(shè)定項目

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

• 我們可以看到第三行的navigationBarTitleText 即為我們的導(dǎo)覽列標(biāo)題內(nèi)容的配置，預(yù)設(shè)為Weixin ，例如我改為「皮皮的小屋」

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

• 效果展示：

  

#2.2 下拉刷新的設(shè)定

關(guān)於下拉刷新我相信大家一定經(jīng)常使用，例如我們使用手機時卡頓了，那麼我們習(xí)慣性動作就是向下拉動螢?zāi)?，這樣我們的頁面就會重新加載，那我們要如何實作功能呢？

• 首先開啟app.json 進(jìn)入window 配置，開啟下拉功能

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

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

• 效果展示：

  

至此我們對於這些配置就進(jìn)行了簡單的介紹，我們在自行嘗試這些配置項的時候需要注意的就是我們onReachBottomDistance ，他的上拉觸底的意思就是我們平時刷購物平臺的時候，當(dāng)我們刷新到離底部一定距離的時候，頁面會自動刷新下面的數(shù)據(jù)，我們就是透過onReachBottomDistance 設(shè)定自動刷新的位置##【相關(guān)學(xué)習(xí)推薦：

小程式學(xué)習(xí)教學(xué)

】

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

以上是微信小程式window導(dǎo)覽列配置（實例詳解）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！