微信小程序tabBar設置實例解析
更新時間：2019年11月14日 11:24:22 作者：小魚吃貓
這篇文章主要介紹了微信小程序tabBar設置實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序tabBar設置實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
我們先來看一份圖，這個設置在官方文檔中已經寫得很清楚了，我只是做一個總結
注：我寫注釋是為了方便說明，在小程序中的json文件中是不能用注釋的
這個tabBar屬于全局屬性，因此就在全局配置文件app.json中配置
1.tabBar的配置
"color": "#8a8a8a",
"selectedColor": "#f40",//選中的顏色
"backgroundColor": "#ffffff",//背景色
"borderStyle": "black",//邊界線的顏色
"position":"top",//位置，是在上邊。還是選擇在下邊，如果選擇top，就不會顯示圖標
"list": [//組件的清單
{
"pagePath": "page/component/index",//頁面路徑
"text": "組件",//組件上顯示的文字
"iconPath": "img/compont_un.png",//默認圖標
"selectedIconPath": "img/compont_on.png"http://選中后的圖標
},
{
"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"
}
]
},
最后再加一張圖，如果你設置了在頂部顯示，效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了純js實現無縫滾動功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹了JavaScript仿百度圖片瀏覽效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
在日常開發(fā)過程中,前端經常要和后端進行接口聯調,獲取并且渲染數據到頁面中,接下來就總結一下?uniapp?中獲取請求、文件下載和上傳的一些方法2023-09-09
這篇文章主要介紹了javascript使用Promise對象實現異步編程的相關資料,需要的朋友可以參考下2016-03-03
今天小編就為大家分享一篇layui實現二維碼彈窗、并下載到本地的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
前幾天在做數據分析時,我嘗試獲取某網站上輸入搜索詞后的聯想詞,輸入搜索詞后會彈出一個顯示聯想詞的框,有趣的是,輸入框失去焦點后,聯想詞彈框就自動消失了,這種情況下該怎么辦呢,所以本文給大家介紹了如何使用JavaScript獲取自動消失的聯想詞,需要的朋友可以參考下2024-06-06
現在有這樣一個問題,由于一些原因,我們經常需要修改gTool的代碼然后上傳更新cdn,但是用戶通過 html 文件訪問的 gTool 鏈接實際上還是緩存的,所以現在問題就是如何禁止緩存,文中給大家介紹了三個方法供大家參考,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了JS實現簡易留言板增刪功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了如何基于layui的laytpl實現數據綁定的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
javascript 中幾個與正則表達式相關的應用,本文將詳細介紹，需要的朋友可以參考下2012-11-11