|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序 底部導航欄目開發資料的相關資料,微信小程序底部想要有一個漂亮的導航欄目,不知道怎么制作,于是百度找到了本篇文章,分享給大家,需要的朋友可以參考下微信小程序 底部導航欄目開發 我們先來看個效果圖
這里,我們添加了三個導航圖標,因為我們有三個頁面,微信小程序最多能加5個。 那他們是怎么出現怎么著色的呢?兩步就搞定! 1. 圖標準備 阿里圖標庫 http://www.iconfont.cn/collections/show/29 我們進入該網站,鼠標滑到一個喜歡的圖標上面 點擊下方的 下載按鈕
在彈出框中 選擇了 倆個不同顏色的 圖標 選擇64px大小即可,我選擇的是png 然后下載下來 起上別名
將上述起好名字的圖標 保存到 小程序 項目目錄中 新創建的 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 底部導航邊框的樣色(注意 這里如果沒有寫入樣式 會導致 導航框上邊框會出現默認的淺灰色線條) list 導航配置數組 selectedIconPath 選中時 圖標路徑 iconPath 未選擇時 圖標路徑 pagePath 頁面訪問地址 text 導航圖標下方文字 如果要改變更詳細的樣式 請參看 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar 以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是關于微信小程序底部導航欄目的開發的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!