微信小程序 底部導航欄目開發(fā)資料
微信小程序 底部導航欄目開發(fā)
我們先來看個效果圖
這里，我們添加了三個導航圖標，因為我們有三個頁面，微信小程序最多能加5個。
那他們是怎么出現(xiàn)怎么著色的呢？兩步就搞定！
1. 圖標準備
阿里圖標庫 http://www.iconfont.cn/collections/show/29
我們進入該網(wǎng)站，鼠標滑到一個喜歡的圖標上面 點擊下方的 下載按鈕
在彈出框中 選擇了 倆個不同顏色的 圖標 選擇64px大小即可，我選擇的是png 然后下載下來 起上別名
將上述起好名字的圖標 保存到 小程序 項目目錄中 新創(chuàng)建的 images 文件夾中，準備工作就做好了
2. 更改配置文件
我們找到項目根目錄中的配置文件 app.json 加入如下配置信息
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle":"white",
"list": [{
"selectedIconPath": "images/111.png",
"iconPath": "images/11.png",
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"selectedIconPath": "images/221.png",
"iconPath": "images/22.png",
"pagePath": "pages/logs/logs",
"text": "日志"
}, {
"selectedIconPath": "images/331.png",
"iconPath": "images/33.png",
"pagePath": "pages/test/test",
"text": "開心測試"
}]
},
解釋一下 對應的屬性信息
tabBar 指底部的 導航配置屬性
color 未選擇時 底部導航文字的顏色
selectedColor 選擇時 底部導航文字的顏色
borderStyle 底部導航邊框的樣色（注意 這里如果沒有寫入樣式 會導致 導航框上邊框會出現(xiàn)默認的淺灰色線條）
list 導航配置數(shù)組
selectedIconPath 選中時 圖標路徑
iconPath 未選擇時 圖標路徑
pagePath 頁面訪問地址
text 導航圖標下方文字
如果要改變更詳細的樣式 請參看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript嚴格模式use strict，嚴格模式是JavaScript中的一種限制性更強的變種方式。嚴格模式并不是JavaScript中的子集，它在語義上與正常的代碼有明顯的差異，下面我們就一起來學習該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12
這篇文章主要介紹了微信小程序 商城開發(fā)（ecshop ）簡單實例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 網(wǎng)絡API發(fā)起請求詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
JavaScript?ES6語法中l(wèi)et,const?,var?的區(qū)別
這篇文章主要為大家介紹了JavaScript中l(wèi)et,const?,var?的區(qū)別，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要為大家介紹了TypeScript的類型指令單行注釋詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了autojs繪畫實現(xiàn)六邊形示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了JS按鈕連擊和接口調(diào)用頻率限制防止客戶集體爆倉詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
微信小程序 解決請求服務器手機預覽請求不到數(shù)據(jù)的方法
這篇文章主要介紹了微信小程序 解決請求服務器手機預覽請求不到數(shù)據(jù)的方法的相關(guān)資料,配置https時，要使用443端口，就可以解決，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了跨端開發(fā)框架avm組件封裝的經(jīng)驗分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了帶你徹底理解JavaScript中的原型對象,文中有詳細的代碼介紹,對正在學習js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04