快捷導(dǎo)航

微信小程序tabBar設(shè)置實(shí)例解析

更新時(shí)間：2019年11月14日 11:24:22 作者：小魚吃貓

這篇文章主要介紹了微信小程序tabBar設(shè)置實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

我們先來(lái)看一份圖，這個(gè)設(shè)置在官方文檔中已經(jīng)寫得很清楚了，我只是做一個(gè)總結(jié)

注：我寫注釋是為了方便說(shuō)明，在小程序中的json文件中是不能用注釋的

這個(gè)tabBar屬于全局屬性，因此就在全局配置文件app.json中配置

1.tabBar的配置

"color": "#8a8a8a",
  "selectedColor": "#f40",//選中的顏色
  "backgroundColor": "#ffffff",//背景色
  "borderStyle": "black",//邊界線的顏色
  "position":"top",//位置，是在上邊。還是選擇在下邊，如果選擇top，就不會(huì)顯示圖標(biāo)
  "list": [//組件的清單
   {
    "pagePath": "page/component/index",//頁(yè)面路徑
    "text": "組件",//組件上顯示的文字 
    "iconPath": "img/compont_un.png",//默認(rèn)圖標(biāo)
    "selectedIconPath": "img/compont_on.png"http://選中后的圖標(biāo)
   },
   {
    "pagePath": "page/API/index",
    "text": "API",
    "iconPath": "img/API_un.png",
    "selectedIconPath": "img/API_on.png"
   },
   {
    "pagePath": "page/persion/index",
    "text": "我的",
    "iconPath": "img/我的_un.png",
    "selectedIconPath": "img/我的_on.png"
   },
   {
    "pagePath": "pages/logs/logs",
    "text": "日志",
    "iconPath": "img/日志.png",
    "selectedIconPath": "img/日志_on.png"
   }
  ]
 },

最后再加一張圖，如果你設(shè)置了在頂部顯示，效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

純js實(shí)現(xiàn)無(wú)縫滾動(dòng)功能代碼實(shí)例
這篇文章主要介紹了純js實(shí)現(xiàn)無(wú)縫滾動(dòng)功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
JavaScript仿百度圖片瀏覽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript仿百度圖片瀏覽效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
uniapp項(xiàng)目實(shí)踐封裝通用請(qǐng)求上傳以及下載方法總結(jié)
在日常開(kāi)發(fā)過(guò)程中,前端經(jīng)常要和后端進(jìn)行接口聯(lián)調(diào),獲取并且渲染數(shù)據(jù)到頁(yè)面中,接下來(lái)就總結(jié)一下?uniapp?中獲取請(qǐng)求、文件下載和上傳的一些方法
2023-09-09
javascript使用Promise對(duì)象實(shí)現(xiàn)異步編程
這篇文章主要介紹了javascript使用Promise對(duì)象實(shí)現(xiàn)異步編程的相關(guān)資料,需要的朋友可以參考下
2016-03-03
layui實(shí)現(xiàn)二維碼彈窗、并下載到本地的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)二維碼彈窗、并下載到本地的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
詳解如何使用JavaScript獲取自動(dòng)消失的聯(lián)想詞
前幾天在做數(shù)據(jù)分析時(shí),我嘗試獲取某網(wǎng)站上輸入搜索詞后的聯(lián)想詞,輸入搜索詞后會(huì)彈出一個(gè)顯示聯(lián)想詞的框,有趣的是,輸入框失去焦點(diǎn)后,聯(lián)想詞彈框就自動(dòng)消失了,這種情況下該怎么辦呢,所以本文給大家介紹了如何使用JavaScript獲取自動(dòng)消失的聯(lián)想詞,需要的朋友可以參考下
2024-06-06
.html文件防止script腳本緩存的三種方法
現(xiàn)在有這樣一個(gè)問(wèn)題,由于一些原因,我們經(jīng)常需要修改gTool的代碼然后上傳更新cdn,但是用戶通過(guò) html 文件訪問(wèn)的 gTool 鏈接實(shí)際上還是緩存的,所以現(xiàn)在問(wèn)題就是如何禁止緩存,文中給大家介紹了三個(gè)方法供大家參考,需要的朋友可以參考下
2024-01-01
JS實(shí)現(xiàn)簡(jiǎn)易留言板增刪功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易留言板增刪功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
javascript 正則表達(dá)式相關(guān)應(yīng)介紹
javascript 中幾個(gè)與正則表達(dá)式相關(guān)的應(yīng)用,本文將詳細(xì)介紹，需要的朋友可以參考下
2012-11-11