微信小程序 底部導(dǎo)航欄目開(kāi)發(fā)資料
微信小程序 底部導(dǎo)航欄目開(kāi)發(fā)
我們先來(lái)看個(gè)效果圖
這里,我們添加了三個(gè)導(dǎo)航圖標(biāo),因?yàn)槲覀冇腥齻€(gè)頁(yè)面,微信小程序最多能加5個(gè)。
那他們是怎么出現(xiàn)怎么著色的呢??jī)刹骄透愣ǎ?br />
1. 圖標(biāo)準(zhǔn)備
阿里圖標(biāo)庫(kù) http://www.iconfont.cn/collections/show/29
我們進(jìn)入該網(wǎng)站,鼠標(biāo)滑到一個(gè)喜歡的圖標(biāo)上面 點(diǎn)擊下方的 下載按鈕
在彈出框中 選擇了 倆個(gè)不同顏色的 圖標(biāo) 選擇64px大小即可,我選擇的是png 然后下載下來(lái) 起上別名
將上述起好名字的圖標(biāo) 保存到 小程序 項(xiàng)目目錄中 新創(chuàng)建的 images 文件夾中,準(zhǔn)備工作就做好了
2. 更改配置文件
我們找到項(xiàng)目根目錄中的配置文件 app.json 加入如下配置信息
"tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle":"white", "list": [{ "selectedIconPath": "images/111.png", "iconPath": "images/11.png", "pagePath": "pages/index/index", "text": "首頁(yè)" }, { "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": "開(kāi)心測(cè)試" }] },
解釋一下 對(duì)應(yīng)的屬性信息
tabBar 指底部的 導(dǎo)航配置屬性
color 未選擇時(shí) 底部導(dǎo)航文字的顏色
selectedColor 選擇時(shí) 底部導(dǎo)航文字的顏色
borderStyle 底部導(dǎo)航邊框的樣色(注意 這里如果沒(méi)有寫入樣式 會(huì)導(dǎo)致 導(dǎo)航框上邊框會(huì)出現(xiàn)默認(rèn)的淺灰色線條)
list 導(dǎo)航配置數(shù)組
selectedIconPath 選中時(shí) 圖標(biāo)路徑
iconPath 未選擇時(shí) 圖標(biāo)路徑
pagePath 頁(yè)面訪問(wèn)地址
text 導(dǎo)航圖標(biāo)下方文字
如果要改變更詳細(xì)的樣式 請(qǐng)參看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序教程系列之設(shè)置標(biāo)題欄和導(dǎo)航欄(7)
- 微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼
- 微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
- 詳解微信小程序設(shè)置底部導(dǎo)航欄目方法
- 微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
- 微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果
- 微信小程序?qū)崙?zhàn)之仿android fragment可滑動(dòng)底部導(dǎo)航欄(4)
- 微信小程序自定義導(dǎo)航欄(模板化)
相關(guān)文章
umi插件開(kāi)發(fā)仿dumi項(xiàng)目自動(dòng)生成導(dǎo)航欄實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了umi插件開(kāi)發(fā)仿dumi項(xiàng)目自動(dòng)生成導(dǎo)航欄實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序頁(yè)面開(kāi)發(fā)注意事項(xiàng)整理
這篇文章主要介紹了微信小程序頁(yè)面開(kāi)發(fā)注意事項(xiàng)整理的相關(guān)資料,需要的朋友可以參考下2017-05-05Astro Islands靜態(tài)頁(yè)面交互式UI組件
這篇文章主要為大家介紹了Astro Islands靜態(tài)頁(yè)面交互式UI組件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08javascript Number 與 Math對(duì)象的介紹
這篇文章主要介紹了javascript Number 與 Math對(duì)象,文章圍繞 Number 與 Math對(duì)象的相關(guān)資料展開(kāi)內(nèi)容,需要的朋友可以參考一下,希望對(duì)你有所幫助2021-11-11dotenv源碼解讀從.env文件中讀取環(huán)境變量
這篇文章主要為大家介紹了dotenv源碼解讀從.env文件中讀取環(huán)境變量示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12