微信小程序全局配置之tabBar實(shí)戰(zhàn)案例
全局配置 - tabBar
1. 什么是 tabBar
tabBar 是移動(dòng)端應(yīng)用常見的頁面效果, 用于實(shí)現(xiàn)多頁面 的快速切換 。
小程序中通常將其分為:
- 底部 tabBar
- 頂部 tabBar
注意: tabBar中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁簽 當(dāng)渲染頂部 tabBar 時(shí),不顯示 icon,只顯示文本
2. tabBar 的 6 個(gè)組成部分
① backgroundColor:tabBar 的背景色
② selectedIconPath:選中時(shí)的圖片路徑
③ borderStyle:tabBar 上邊框的顏色
④ iconPath:未選中時(shí)的圖片路徑
⑤ selectedColor:tab 上的文字選中時(shí)的顏色
⑥ color:tab 上文字的默認(rèn)(未選中)顏色
3. tabBar 節(jié)點(diǎn)的配置項(xiàng)
屬性 | 類型 | 必填 | 默認(rèn)值 | 描述 |
position | String | 否 | bottom | tabBar 的位置,僅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上邊框的顏色,僅支持 black/white |
color | HexColor | 否 | tab 上文字的默認(rèn)(未選中)顏色 | |
selectedColor | HexColor | 否 | tab 上的文字選中時(shí)的顏色 | |
backgroundColor | HexColor | 否 | tabBar 的背景色 | |
list | Array | 是 | tab 頁簽的列表,
最少 2 個(gè)、最多 5 個(gè) tab |
4. 每個(gè) tab 項(xiàng)的配置選項(xiàng)
屬性 | 類型 | 必填 | 描述 |
pagePath | String | 是 | 頁面路徑,頁面必須在 pages 中預(yù)先定義 |
text | String | 是 | tab 上顯示的文字 |
iconPath | String | 否 | 未選中時(shí)的圖標(biāo)路徑;當(dāng) postion 為 top 時(shí),不顯示 icon |
selectedIconPath | String | 否 | 選中時(shí)的圖標(biāo)路徑;當(dāng) postion 為 top 時(shí),不顯示 icon |
全局配置 - 案例:配置 tabBar
1. 需求描述
根據(jù)素材中提供的小圖標(biāo)、 在小程序中配置如圖所示的 tabBar 效果:
素材:
2. 實(shí)現(xiàn)步驟
① 拷貝圖標(biāo)資源
② 新建 3 個(gè)對應(yīng)的 tab 頁面
③ 配置 tabBar 選項(xiàng)
3. 步驟1 - 拷貝圖標(biāo)資源
① 把資料目錄中的 images 文件夾, 拷貝到小程序項(xiàng)目根目錄中
② 將需要用到的小圖標(biāo)分為 3 組,每組兩個(gè),其中:
圖片名稱中 包含 -active 的是選中之后 的圖標(biāo)
圖片名稱中 不包含 -active 的是 默認(rèn)圖標(biāo)
截圖如下:
4.步驟2 - 新建 3 個(gè)對應(yīng)的 tab 頁面
通過 app.json 文件的 pages 節(jié)點(diǎn),快速新建 3 個(gè)對應(yīng)的 tab 頁面,示例代碼如下:
其中,home 是首頁,message 是消息頁面,contact 是聯(lián)系我們頁面。
5. 步驟3 - 配置 tabBar 選項(xiàng)
① 打開 app.json 配置文件,和 pages、window 平級,新增 tabBar 節(jié)點(diǎn)
② tabBar 節(jié)點(diǎn)中,新增 list 數(shù)組 ,這個(gè)數(shù)組中存放的,是每個(gè) tab 項(xiàng)的配置對象
③ 在 list 數(shù)組中, 新增每一個(gè) tab 項(xiàng)的配置對象 。對象中包含的屬性如下:
- pagePath 指定當(dāng)前 tab 對應(yīng)的頁面路徑 【 必填 】
- text 指定當(dāng)前 tab 上按鈕的文字【 必填 】
- iconPath 指定當(dāng)前 tab 未選中時(shí)候的圖片路徑【可選】
- selectedIconPath 指定當(dāng)前 tab 被選中后高亮的圖片路徑【可選】
6. 完整的配置代碼
{ "pages": [ "pages/home/home", "pages/message/message", "pages/contact/contact" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f12321", "navigationBarTitleText": "測試", "navigationBarTextStyle": "white" }, "tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "首頁", "iconPath": "/images/tabs/home.png", "selectedIconPath": "/images/tabs/home-active.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "/images/tabs/message.png", "selectedIconPath": "/images/tabs/message-active.png" }, { "pagePath": "pages/contact/contact", "text": "聯(lián)系我們", "iconPath": "/images/tabs/contact.png", "selectedIconPath": "/images/tabs/contact-active.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
總結(jié)
到此這篇關(guān)于微信小程序全局配置之tabBar的文章就介紹到這了,更多相關(guān)微信小程序全局配置tabBar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript實(shí)現(xiàn)前端簡單的路由實(shí)例
本文將使用javascript實(shí)現(xiàn)一個(gè)極其簡單的路由實(shí)例。WEB開發(fā)中路由概念并不陌生,我們接觸到的有前端路由和后端路由。后端路由在很多框架中是一個(gè)重要的模塊,同樣前端路由在單頁面應(yīng)用也很常見,它使得前端頁面體驗(yàn)更流暢。2016-09-09一個(gè)剛完成的layout(拖動(dòng)流暢,不受iframe影響)
一個(gè)剛完成的layout(拖動(dòng)流暢,不受iframe影響)...2007-08-08JS與SQL方式隨機(jī)生成高強(qiáng)度密碼示例
這篇文章主要介紹了JS與SQL方式隨機(jī)生成高強(qiáng)度密碼,結(jié)合實(shí)例形式分析了javascript方式與SQL方式生成高強(qiáng)度密碼的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12微信公眾平臺開發(fā)教程(四) 實(shí)例入門:機(jī)器人回復(fù)(附源碼)
本篇文章主要介紹了微信公眾平臺開發(fā)機(jī)器人,可以實(shí)現(xiàn)簡單對話和查詢天氣等,有需要的可以了解一下。2016-12-12uniapp單頁面實(shí)現(xiàn)頁面切換的使用示例
本文主要介紹了uniapp單頁面實(shí)現(xiàn)頁面切換的使用示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09基于Flowplayer打造一款免費(fèi)的WEB視頻播放器附源碼
Flowplayer是一款免費(fèi)的WEB視頻播放器。它支持播放flv、swf等流媒體和圖片文件,能夠非常流暢的播放視頻文件,支持自定義配置和擴(kuò)展。下面本篇文章給大家介紹基于Flowplayer打造一款免費(fèi)的WEB視頻播放器,需要的朋友可以參考下2015-09-09js獲取select默認(rèn)選中的Option并不是當(dāng)前選中值
這篇文章主要介紹了js如何獲取select默認(rèn)選中的Option并不是當(dāng)前選中的值,需要的朋友可以參考下2014-05-05前端常用判斷符號??,?.?,!?,!!?,||?,&&,?:用法示例
這篇文章主要給大家介紹了關(guān)于前端常用判斷符號??,?.?,!?,!!?,||?,&&,?:的相關(guān)資料,?在日常編寫中,我們會(huì)頻繁使用以下幾個(gè)符號,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03