快捷導(dǎo)航

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

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

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

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

注：我寫(xiě)注釋是為了方便說(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)文章

JavaScript實(shí)現(xiàn)導(dǎo)入和導(dǎo)出Excel的示例詳解
在現(xiàn)代的Web應(yīng)用開(kāi)發(fā)中,與Excel文件的導(dǎo)入和導(dǎo)出成為了一項(xiàng)常見(jiàn)而重要的任務(wù),本文主要介紹了如何在熟悉的電子表格?UI?中輕松導(dǎo)入?Excel?文件,需要的可以參考下
2024-03-03
JS檢測(cè)瀏覽器開(kāi)發(fā)者工具是否打開(kāi)的方法詳解
本篇文章主要講述幾種前端JS檢測(cè)開(kāi)發(fā)者工具是否打開(kāi)的方法,需要的朋友可以參考下
2020-10-10
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能具體實(shí)現(xiàn)，需要的朋友可以參考一下
2013-06-06
JS中FRAME的操作問(wèn)題實(shí)例分析
這篇文章主要介紹了JS中FRAME的操作問(wèn)題實(shí)例分析,詳細(xì)講述了js針對(duì)frame框架操作中的各種訪問(wèn)問(wèn)題,需要的朋友可以參考下
2014-10-10
xmlhttp緩存清除的2種解決方法
這篇文章主要介紹了xmlhttp緩存清除的2種解決方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
JS數(shù)組返回去重后數(shù)據(jù)的方法解析
本文主要分享了Js數(shù)組返回去重后的數(shù)據(jù)的實(shí)例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
js前端存儲(chǔ)之sessionStorage使用方法舉例
sessionStorage是指本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀,這篇文章主要給大家介紹了關(guān)于js前端存儲(chǔ)之sessionStorage使用方法的相關(guān)資料,需要的朋友可以參考下
2024-06-06
用js獲取電腦信息(是使用與IE瀏覽器)
用js獲取本地電腦信息（但是只能在IE瀏覽器下才行，其他瀏覽器其獲取不到的）
2013-01-01
JS如何輸出26個(gè)英文字符
這篇文章主要介紹了JS如何輸出26個(gè)英文字符問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
JS實(shí)現(xiàn)獲取當(dāng)前所在周的周六、周日示例分析
這篇文章主要介紹了JS實(shí)現(xiàn)獲取當(dāng)前所在周的周六、周日,結(jié)合具體實(shí)例形式分析了javascript針對(duì)日期時(shí)間的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05