掘金品質
工匠精神
聯系(xi)掘金設(she)計(ji)服務顧問!為(wei)您提供專(zhuan)業(ye)的網(wang)站策(ce)劃方案(an)和建議。
免費服務熱線:
今天跟大家聊聊廈門小程序開發中(zhong)微信(xin)小程序頂部的(de)事情,微信(xin)小程序頂部默認是微信(xin)自帶的(de)導航欄,可(ke)以修改背景顏(yan)色,修改標題,文字顏(yan)色,左(zuo)邊的(de)按鈕(niu)是根據頁(ye)面結構自動生成返(fan)回或者首頁(ye)按鈕(niu)。如下(xia)圖(tu):

但對于小程(cheng)(cheng)序設計(ji)師來(lai)說(shuo),可能會限制他的(de)發揮(hui), 在小程(cheng)(cheng)序制作過程(cheng)(cheng)中(zhong),偶爾(er)會遇(yu)到(dao)一些特殊的(de)需求,如下(xia)設計(ji)圖。


那么小程序(xu)可(ke)以(yi)(yi)自定(ding)義頂部(bu)嗎?答案是可(ke)以(yi)(yi)的,那么,如何(he)設(she)置(zhi)頂部(bu)自定(ding)義呢?,很簡單一個配置(zhi)就搞(gao)定(ding),可(ke)以(yi)(yi)全(quan)局(ju)設(she)置(zhi),也可(ke)以(yi)(yi)單頁(ye)設(she)計,只要在app.json或(huo)者頁(ye)面配置(zhi)json文件中配置(zhi) "navigationStyle": "custom"即可(ke),如下代(dai)碼
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FFD400",
"navigationBarTitleText": "小(xiao)程(cheng)序開(kai)發(fa)",
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
},
這里(li)有個問題(ti)就是,右(you)上角的(de)膠囊按鈕是沒辦法(fa)去掉的(de),所以設計師在設計的(de)時候(hou)需(xu)要注意。
頂部設(she)置為自定義后,中(zhong)間的標題和(he)左上角的按鈕是沒(mei)有了,大家(jia)可以在頁面代碼上實(shi)現。
很多廈門小程序開發者也開發了(le)一些小程序(xu)插件來自定義(yi),非常方便使用。
(以(yi)上內(nei)容為轉載,原著來自(zi)方維(wei)網絡,僅供經(jing)驗參考)