微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換
更新時間：2017年04月12日 09:43:11 作者：dzp_coder
本文主要介紹了微信小程序開發(fā)之選項卡(窗口底部TabBar)頁面切換的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
微信小程序開發(fā)中窗口底部tab欄切換頁面很簡單很方便.
代碼:
1.app.json
//app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#999999",
"navigationBarTitleText": "tab",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color": "#ccc",
"selectedColor": "#35495e",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [
{
"text": "首頁",
"pagePath": "pages/index/index",
"iconPath": "images/home.png",
"selectedIconPath": "images/home-actived.png"
},
{
"text": "目錄",
"pagePath": "pages/catalogue/catalogue",
"iconPath": "images/note.png",
"selectedIconPath": "images/note-actived.png"
},
{
"text": "我的",
"pagePath": "pages/mine/mine",
"iconPath": "images/profile.png",
"selectedIconPath": "images/profile-actived.png"
}
]
}
} pagePath是頁面路徑.iconPath是圖片路徑，icon 大小限制為40kb.
selectedIconPath:選中時的圖片路徑，icon 大小限制為40kb
tab Bar的最多5個,最少2個.
在pages目錄下寫好頁面即可切換.
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了JavaScript對象屬性操作實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要給大家介紹了關于uniapp安卓本地寫入讀取文件的相關資料,在uniapp中可以使用uni-app提供的API實現(xiàn)本地文件讀取和寫入,需要的朋友可以參考下2023-11-11
JavaScript?Canvas繪制六邊形網(wǎng)格
這篇文章主要為大家詳細介紹了JavaScript?Canvas繪制六邊形網(wǎng)格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
JavaScript iframe 實現(xiàn)多窗口通信實例詳解
這篇文章主要為大家介紹了JavaScript iframe 實現(xiàn)多窗口通信實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)列表分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了JavaScript通過事件代理高亮顯示表格行的方法,涉及javascript事件代理及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
"好玩的放大鏡效果" 的另一種實現(xiàn)方法...2006-11-11
利用ES6的Promise.all實現(xiàn)至少請求多長時間的實例
下面小編就為大家?guī)硪黄肊S6的Promise.all實現(xiàn)至少請求多長時間的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了最全面的前端插件Bootstrap快速人門案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
使用layui實現(xiàn)的左側(cè)菜單欄以及動態(tài)操作tab項方法
今天小編就為大家分享一篇使用layui實現(xiàn)的左側(cè)菜單欄以及動態(tài)操作tab項方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09