微信小程序window導航欄配置(實例詳解)
Nov 15, 2022 pm 05:11 PM本篇文章給大家?guī)砹岁P(guān)于微信小程序的相關(guān)知識,其中主要介紹了關(guān)于windows導航欄配置的相關(guān)內(nèi)容,下面就詳細介紹如何配置我們的 window 導航欄,希望對大家有幫助。
【相關(guān)學習推薦:小程序?qū)W習教程】
介紹一下在 wxss 中我們 rpx 的應(yīng)用以及我們對于小程序全局樣式以及局部樣式的配置,然后我們將詳細介紹如何配置我們的 window 導航欄。
-
關(guān)于 rpx 介紹
1. 我們在之前進行 HTML 學習中了解過 px(分辨率)這一個單位,在我們設(shè)置組件經(jīng)常用到,那么在微信小程序中我們用的分辨單位是什么呢?那就是rpx,那么他有什么特別的呢,值得專門設(shè)置它?
2. rpx 是微信小程序特有的,解決屏幕自適應(yīng)的尺寸單位,可以根據(jù)屏幕寬度進行自適應(yīng),不論大小屏幕,規(guī)定屏幕寬為750rpx 通過rpx 設(shè)置元素和字體的大小,小程序在不同尺寸的屏幕下,可以實現(xiàn)自動適配 rpx 和 px之間的換算
<span style="font-size: 14px;">特別的在我們微信小程序開發(fā)中,我們前面提到過推薦使用 iPhone 6 進行開發(fā),因為 iPhone 的 px =375,那么我們 2 rpx= 1 px</span>
-
關(guān)于全局配置和局部配置
關(guān)于全局配置和局部配置我們前面也是以及介紹完畢,感興趣的小伙伴可以前面考古一下!下面我會專門講一下在 全局配置中常用的配置項!
一、全局配置的常用配置項
老規(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 導航欄
我們 window 導航欄的設(shè)置包括了我們前面圖片展示的前兩個區(qū)域,我們接下來先介紹一下我們 window 節(jié)點常見的配置項。
屬性名 | 類型 | 默認值 | 作用 |
---|---|---|---|
navigationBarTitleText | string | 字字符串 | 導航欄標題內(nèi)容 |
navigationBarBackgroundColor | Hexcolor | #000000 | 設(shè)置導航欄背景顏色(比如熒黃色 #ffa) |
navigationBarTextStyle | string | white | 設(shè)置導航欄標題的顏色(僅含有黑色和白色) |
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 即為我們的導航欄標題內(nèi)容的配置,默認為 Weixin ,比如我更改為 “皮皮的小屋”
"window":{ ??"backgroundTextStyle":"light", ??"navigationBarBackgroundColor":?"#fff", ??"navigationBarTitleText":?"皮皮的小屋", ??"navigationBarTextStyle":"black" ?},
-
效果展示:
2.2 下拉刷新的配置
關(guān)于下拉刷新我相信大家一定經(jīng)常使用,比如我們使用手機時卡頓了,那么我們習慣性動作就是向下拉動屏幕,這樣我們的頁面就會重新加載,那么我們?nèi)绾螌崿F(xiàn)功能呢?
-
首先打開 app.json 進入 window 配置,打開下拉功能
??"window":{ ??"backgroundTextStyle":"light", ??"navigationBarBackgroundColor":?"#ffa", ??"navigationBarTitleText":?"皮皮的小屋", ??"navigationBarTextStyle":"black", ??"enablePullDownRefresh":?true ?},
在最后一行我們將 enablePullDownRefresh 設(shè)置為 true 即可
-
效果展示:
至此我們對于這些配置就進行了簡單的介紹,我們在自行嘗試這些配置項的時候需要注意的就是我們 onReachBottomDistance ,他的上拉觸底的意思就是我們平時刷購物平臺的時候,當我們刷新到離底部一定距離的時候,頁面會自動刷新下面的數(shù)據(jù),我們就是通過 onReachBottomDistance 設(shè)置自動刷新的位置
【相關(guān)學習推薦:小程序?qū)W習教程】
以上是微信小程序window導航欄配置(實例詳解)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機

Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

閑魚官方微信小程序悄然上線,在小程序中可以發(fā)布閑置與買家/賣家私信交流、查看個人資料及訂單、搜索物品等,有用好奇閑魚微信小程序叫什么,現(xiàn)在快來看一下。閑魚微信小程序叫什么答案:閑魚,閑置交易二手買賣估價回收。1、在小程序中可以發(fā)布閑置、與買家/賣家私信交流、查看個人資料及訂單、搜索指定物品等功能;2、在小程序的頁面中有首頁、附近、發(fā)閑置、消息、我的5項功能;3、想要使用的話必要要開通微信支付才可以購買;

實現(xiàn)微信小程序中的圖片濾鏡效果隨著社交媒體應(yīng)用的流行,人們越來越喜歡在照片中應(yīng)用濾鏡效果,以增強照片的藝術(shù)效果和吸引力。在微信小程序中也可以實現(xiàn)圖片濾鏡效果,為用戶提供更多有趣和創(chuàng)造性的照片編輯功能。本文將介紹如何在微信小程序中實現(xiàn)圖片濾鏡效果,并提供具體的代碼示例。首先,我們需要在微信小程序中使用canvas組件來加載和編輯圖片。canvas組件可以在頁面

實現(xiàn)微信小程序中的下拉菜單效果,需要具體代碼示例隨著移動互聯(lián)網(wǎng)的普及,微信小程序成為了互聯(lián)網(wǎng)開發(fā)的重要一環(huán),越來越多的人開始關(guān)注和使用微信小程序。微信小程序的開發(fā)相比傳統(tǒng)的APP開發(fā)更加簡便快捷,但也需要掌握一定的開發(fā)技巧。在微信小程序的開發(fā)中,下拉菜單是一個常見的UI組件,實現(xiàn)了更好的用戶操作體驗。本文將詳細介紹如何在微信小程序中實現(xiàn)下拉菜單效果,并提供具

閑魚官方微信小程序已經(jīng)悄然上線,它為用戶提供了一個便捷的平臺,讓你可以輕松地發(fā)布和交易閑置物品。在小程序中,你可以與買家或賣家進行私信交流,查看個人資料和訂單,以及搜索你想要的物品。那么閑魚在微信小程序中究竟叫什么呢,這篇教程攻略將為您詳細介紹,想要了解的用戶們快來跟著本文繼續(xù)閱讀吧!閑魚微信小程序叫什么答案:閑魚,閑置交易二手買賣估價回收。1、在小程序中可以發(fā)布閑置、與買家/賣家私信交流、查看個人資料及訂單、搜索指定物品等功能;2、在小程序的頁面中有首頁、附近、發(fā)閑置、消息、我的5項功能;3、

微信小程序?qū)崿F(xiàn)圖片上傳功能隨著移動互聯(lián)網(wǎng)的發(fā)展,微信小程序已經(jīng)成為了人們生活中不可或缺的一部分。微信小程序不僅提供了豐富的應(yīng)用場景,還支持開發(fā)者自定義功能,其中包括圖片上傳功能。本文將介紹如何在微信小程序中實現(xiàn)圖片上傳功能,并提供具體的代碼示例。一、前期準備工作在開始編寫代碼之前,我們需要先下載并安裝微信開發(fā)者工具,并注冊成為微信開發(fā)者。同時,還需要了解微信

使用微信小程序?qū)崿F(xiàn)輪播圖切換效果微信小程序是一種輕量級的應(yīng)用程序,具有簡單、高效的開發(fā)和使用特點。在微信小程序中,實現(xiàn)輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程序?qū)崿F(xiàn)輪播圖切換效果,并給出具體的代碼示例。首先,在微信小程序的頁面文件中,添加一個輪播圖組件。例如,可以使用<swiper>標簽來實現(xiàn)輪播圖的切換效果。在該組件中,可以通過b

實現(xiàn)微信小程序中的圖片旋轉(zhuǎn)效果,需要具體代碼示例微信小程序是一種輕量級的應(yīng)用程序,為用戶提供了豐富的功能和良好的用戶體驗。在小程序中,開發(fā)者可以利用各種組件和API來實現(xiàn)各種效果。其中,圖片旋轉(zhuǎn)效果是一種常見的動畫效果,可以為小程序增添趣味性和視覺效果。在微信小程序中實現(xiàn)圖片旋轉(zhuǎn)效果,需要使用小程序提供的動畫API。下面是一個具體的代碼示例,展示了如何在小程

實現(xiàn)微信小程序中的滑動刪除功能,需要具體代碼示例隨著微信小程序的流行,開發(fā)者們在開發(fā)過程中經(jīng)常會遇到一些常見功能的實現(xiàn)問題。其中,滑動刪除功能是一個常見、常用的功能需求。本文將為大家詳細介紹如何在微信小程序中實現(xiàn)滑動刪除功能,并給出具體的代碼示例。一、需求分析在微信小程序中,滑動刪除功能的實現(xiàn)涉及到以下要點:列表展示:要顯示可滑動刪除的列表,每個列表項需要包
