微信小程序開發(fā)之tabbar圖標和顏色的實現(xiàn)
更新時間：2018年10月17日 11:08:43 作者：國蘇
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標和顏色的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前期準備 ：注冊，填材料，驗證等等：https://mp.weixin.qq.com
1.瀏覽一遍簡易教程，下載相應的開發(fā)工具
寫一個小例子
點擊左側(cè)的 “編輯”-》點擊右側(cè)代碼里的 app.json 修改為
{
"pages":[
"pages/fightings/home",
"pages/publish/home",
"pages/mine/home"
],
"tabBar": {
"list": [
{
"pagePath": "pages/fightings/home",
"text": "挑戰(zhàn)"
},
{
"pagePath": "pages/publish/home",
"text": "發(fā)布"
},
{
"pagePath": "pages/mine/home",
"text": "我"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "i挑戰(zhàn)",
"navigationBarTextStyle":"black"
}
}
說明
- pages就是我們有多少個頁面
- tabbar是頁面底部的tab
- window是頁面的一些屬性
這個樣子太丑了 我們先來美化一下這個tab
{
"pages":[
"pages/home/home",
"pages/fightings/home",
"pages/mine/home"
],
"tabBar": {
"color":"#666666",
"selectedColor":"#f10b2e",
"list": [
{
"pagePath": "pages/home/home",
"text": "大廳",
"iconPath": "./res/icon_tab_home.png",
"selectedIconPath": "./res/icon_tab_home_hl.png"
},
{
"pagePath": "pages/fightings/home",
"text": "挑戰(zhàn)",
"iconPath":"./res/icon_tab_fighting.png",
"selectedIconPath":"./res/icon_tab_fighting_hl.png"
},
{
"pagePath": "pages/mine/home",
"text": "我",
"iconPath": "./res/icon_tab_me.png",
"selectedIconPath": "./res/icon_tab_me_hl.png"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "i挑戰(zhàn)",
"navigationBarTextStyle":"black"
}
}
說明
字段都比較簡單就不詳細說了 其中 “iconPath”: “./res/icon_tab_me.png”是圖片的路徑
自己在項目里創(chuàng)建一個res文件夾，然后放入需要的圖片
tab 好看一點了吧
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JS封裝的自動創(chuàng)建表格的實現(xiàn)代碼
這篇文章主要介紹了JS封裝的自動創(chuàng)建表格的實現(xiàn)代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細，對我們學習JS有一定幫助，需要的可以參考一下2022-08-08
javascript 簡單抽屜效果的實現(xiàn)代碼，需要的朋友可以參考下，大家自行測試。2010-03-03
發(fā)現(xiàn)一個關于瀏覽器兼容的問題，當用JS 執(zhí)行代碼 window.location.href=”http://m.fzitv.net” 來進行跳轉(zhuǎn)的時候，F(xiàn)irefox 可以獲取到到HTTP_REFERER頁面，但是在IE中這一項為空2014-06-06
去除圖像或鏈接黑眼圈的兩種方法總結...2007-06-06
這篇文章主要介紹了JsRender實用入門實例,包含了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點,并提供了完整的實例下載,非常具有實用價值,需要的朋友可以參考下2014-10-10
這篇文章主要為大家介紹了Nest.js快速啟動API項目過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
事件是將JavaScript腳本與網(wǎng)頁聯(lián)系在一起的主要方式，是JavaScript中最重要的主題之一。本文將詳細探討JavaScript的事件機制，并對比分析了瀏覽器之間的不同，具體內(nèi)容包括事件流、事件處理程序綁定方式、事件對象等。2017-01-01
這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結,本文總結了5種判斷整數(shù)的方法,如取余運算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下2014-11-11
JS加密插件CryptoJS實現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的Base64加密,結合實例形式分析了CryptoJS進行base64加密的簡單實現(xiàn)技巧,需要的朋友可以參考下2018-08-08