欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序全局配置之tabBar實(shí)戰(zhàn)案例

 更新時(shí)間:2022年08月06日 13:46:31   作者:熱愛編程的小白白  
tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

全局配置 - 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)值描述
positionStringbottomtabBar 的位置,僅支持 bottom/top
borderStyleStringblacktabBar 上邊框的顏色,僅支持 black/white
colorHexColor tab 上文字的默認(rèn)(未選中)顏色
selectedColorHexColor tab 上的文字選中時(shí)的顏色
backgroundColorHexColor tabBar 的背景色
listArray 
tab 頁簽的列表,
最少 2 個(gè)、最多 5 個(gè) tab

4. 每個(gè) tab 項(xiàng)的配置選項(xiàng)

屬性類型必填描述
pagePathString頁面路徑,頁面必須在 pages 中預(yù)先定義
textStringtab 上顯示的文字
iconPathString未選中時(shí)的圖標(biāo)路徑;當(dāng) postion 為 top 時(shí),不顯示 icon
selectedIconPathString選中時(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)文章

最新評論