微信小程式window導覽列配置（實例詳解）-小程式開發-PHP中文網

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

WBOY

發布： 2022-11-15 20:08:51

轉載

3187 人瀏覽過

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

微信小程式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中文網其他相關文章！