微信小程式window導覽列配置(實例詳解)

WBOY
發布: 2022-11-15 20:08:51
轉載
3124 人瀏覽過

這篇文章為大家帶來了關於微信小程式的相關知識,其中主要介紹了關於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 導覽列的設定包含了我們前面圖片展示的前兩個區域,我們接下來先介紹一下我們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"
     },
    登入後複製
  • 效果展示:

    微信小程式window導覽列配置(實例詳解)

#2.2 下拉刷新的設定

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

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

      "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#ffa",
      "navigationBarTitleText": "皮皮的小屋",
      "navigationBarTextStyle":"black",
      "enablePullDownRefresh": true
     },
    登入後複製
  • ##在最後一行我們將enablePullDownRefresh 設定為true 即可

  • 效果展示:

    微信小程式window導覽列配置(實例詳解)

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

小程式學習教學

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

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

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板