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

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

站在用戶的角度思考問題，與客戶深入溝通，找到龍圩網(wǎng)站設(shè)計與龍圩網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋龍圩地區(qū)。

• 關(guān)于 rpx 介紹

  1. 我們在之前進行 HTML 學(xué)習(xí)中了解過 px（分辨率）這一個單位，在我們設(shè)置組件經(jīng)常用到，那么在微信小程序中我們用的分辨單位是什么呢？那就是rpx，那么他有什么特別的呢，值得專門設(shè)置它？

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

  特別的在我們微信小程序開發(fā)中，我們前面提到過推薦使用 iPhone 6 進行開發(fā)，因為 iPhone 的 px =375，那么我們 2 rpx= 1 px

一、全局配置的常用配置項

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

配置項名稱	作用
pages	存放當前小程序所有頁面的存放路徑
window	設(shè)置小程序窗口的外觀
tabBar	設(shè)置小程序底部的 tabBar 效果
style	是否啟用新版的組件的選項

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

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

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

二 、window 導(dǎo)航欄

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

屬性名	類型	默認值	作用
navigationBarTitleText	string	字字符串	導(dǎo)航欄標題內(nèi)容
navigationBarBackgroundColor	Hexcolor	#000000	設(shè)置導(dǎo)航欄背景顏色（比如熒黃色 #ffa）
navigationBarTextStyle	string	white	設(shè)置導(dǎo)航欄標題的顏色（僅含有黑色和白色）
backgroundColor	Hexcolor	#ffffff	窗口的背景顏色
backgroundTextStyle	string	dark	設(shè)置下拉 loading 的樣式 僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否全局開啟下拉刷新
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發(fā)閾值（距頁面底部距離 單位為 px）

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

2.1 navigationBarTitleText 配置項

話不多說開始操作！

• 打開 app.json ，找到 window

• 在 window 中我們可以看到下面默認的配置項目

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

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

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

2.2 下拉刷新的配置

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

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

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

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

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

標題名稱：微信小程序window導(dǎo)航欄配置的方法是什么
當前地址：http://m.kartarina.com/article29/johhjh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、建站公司、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、Google、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)