微信小程序window導(dǎo)航欄配置的方法是什么

這篇文章主要介紹“微信小程序window導(dǎo)航欄配置的方法是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序window導(dǎo)航欄配置的方法是什么”文章能幫助大家解決問(wèn)題。

• 關(guān)于 rpx 介紹

  1. 我們?cè)谥斑M(jìn)行 HTML 學(xué)習(xí)中了解過(guò) px（分辨率）這一個(gè)單位，在我們?cè)O(shè)置組件經(jīng)常用到，那么在微信小程序中我們用的分辨單位是什么呢？那就是rpx，那么他有什么特別的呢，值得專(zhuān)門(mén)設(shè)置它？

  2. rpx 是微信小程序特有的，解決屏幕自適應(yīng)的尺寸單位，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),不論大小屏幕,規(guī)定屏幕寬為750rpx 通過(guò)rpx 設(shè)置元素和字體的大小,小程序在不同尺寸的屏幕下,可以實(shí)現(xiàn)自動(dòng)適配 rpx 和 px之間的換算

  特別的在我們微信小程序開(kāi)發(fā)中，我們前面提到過(guò)推薦使用 iPhone 6 進(jìn)行開(kāi)發(fā)，因?yàn)?iPhone 的 px =375，那么我們 2 rpx= 1 px

一、全局配置的常用配置項(xiàng)

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

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

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

• style 咱們前面在介紹 button 的時(shí)候也帶大家看過(guò)，當(dāng)我們將 style 刪去時(shí)，我們的組件樣式就變?yōu)槔习姹镜?/p>

二 、window 導(dǎo)航欄

我們 window 導(dǎo)航欄的設(shè)置包括了我們前面圖片展示的前兩個(gè)區(qū)域，我們接下來(lái)先介紹一下我們 window 節(jié)點(diǎn)常見(jiàn)的配置項(xiàng)。

我們所有的上述設(shè)置都是在 app.json 內(nèi)的 window 里面進(jìn)行設(shè)置?。?！接下來(lái)我演示一下 navigationBarTitleText 和 下拉相關(guān)屬性 ，剩下的配置項(xiàng)大家可以自行嘗試！

2.1 navigationBarTitleText 配置項(xiàng)

話(huà)不多說(shuō)開(kāi)始操作！

• 打開(kāi) app.json ，找到 window

• 在 window 中我們可以看到下面默認(rèn)的配置項(xiàng)目

  
  

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

• 我們可以看到第三行的 navigationBarTitleText 即為我們的導(dǎo)航欄標(biāo)題內(nèi)容的配置，默認(rèn)為 Weixin ，比如我更改為 “皮皮的小屋”

  
  

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

2.2 下拉刷新的配置

關(guān)于下拉刷新我相信大家一定經(jīng)常使用，比如我們使用手機(jī)時(shí)卡頓了，那么我們習(xí)慣性動(dòng)作就是向下拉動(dòng)屏幕，這樣我們的頁(yè)面就會(huì)重新加載，那么我們?nèi)绾螌?shí)現(xiàn)功能呢？

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

  
  

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

• 在最后一行我們將 enablePullDownRefresh 設(shè)置為 true 即可

關(guān)于“微信小程序window導(dǎo)航欄配置的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。