微信小程序之tabBar開發(fā)教程
2018-01-31|HiShop
導(dǎo)讀: 小程序底部導(dǎo)航Tabbar 底部導(dǎo)航欄這個(gè)功能是非常常見的一個(gè)功能,基本上一個(gè)完成的app,都會(huì)存在一個(gè)導(dǎo)航欄,那么微信小程序的導(dǎo)航欄該怎么實(shí)現(xiàn)呢
...
小程序底部導(dǎo)航Tabbar 底部導(dǎo)航欄這個(gè)功能是非常常見的一個(gè)功能,基本上一個(gè)完成的app,都會(huì)存在一個(gè)導(dǎo)航欄,那么微信小程序的導(dǎo)航欄該怎么實(shí)現(xiàn)呢?
tabBar
先創(chuàng)建幾個(gè)頁面,要注意文件夾和頁面名稱,以及app.json里面的配置。官方文檔描述的很詳細(xì)。
注意:為了方便開發(fā)者減少配置項(xiàng),描述頁面的四個(gè)文件必須具有相同的路徑與文件名。
創(chuàng)建一個(gè)放圖片的文件夾,放上幾張tabBar小圖標(biāo)。
在app.json中寫tanBar的配置,tabBar與pages、window同級(jí)。
"tabBar":{
"color": "#ddd",
"selectedColor": "#1AAD00",
"backgroundColor": "#fff",
"borderStyle": "black",
"list":[
{
"pagePath": "pages/index/index",
"iconPath": "images/footer-icon-01.png",
"selectedIconPath": "images/footer-icon-01-active.png",
"text": "首頁"
},
{
"pagePath": "pages/find/find",
"iconPath": "images/footer-icon-03.png",
"selectedIconPath": "images/footer-icon-03-active.png",
"text": "發(fā)現(xiàn)"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "images/footer-icon-04.png",
"selectedIconPath": "images/footer-icon-04-active.png",
"text": "我的"
}
]
}
編譯一下,tabBar就出現(xiàn)了~
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。
更多小程序資訊,盡在:m.descansotropical.com/xiaocx/
您可能感興趣:小程序