uni-app仿微信、淘寶頂部導(dǎo)航條|uniapp自定義導(dǎo)航欄

原創(chuàng) 贊收藏 評(píng)論

舉報(bào) 2019-09-17

掃描,分享朋友圈

基于uni-app實(shí)現(xiàn)的仿微信、京東頂部導(dǎo)航，支持背景漸變、標(biāo)題居左/居中、搜索條，圓點(diǎn)提示，按鈕可自定義傳入文字/字體圖標(biāo)/圖片

uniapp原生導(dǎo)航

uni-app原生導(dǎo)航欄也能實(shí)現(xiàn)一些頂部自定義按鈕+搜索框，只需在page.json里面做一些配置即可。設(shè)置app-plus，dcloud平臺(tái)對(duì)app-plus做了詳細(xì)說(shuō)明：app-plus配置，不過(guò)目前暫支持H5、App端，不支持小程序。

app-plus詳細(xì)講解：https://uniapp.dcloud.io/collocation/pages?id=app-plus

RN聊天室項(xiàng)目：https://cloud.tencent.com/developer/article/1496681

360截圖20190916235849603.png

需在項(xiàng)目page.json里面配置app-plus

{
    "path": "pages/ucenter/index",
    "style": {
        "navigationBarTitleText": "我的",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "text": "\ue670",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px",
                        "float": "left"
                    },
                    {
                        "text": "\ue62c",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px"
 
                    }
                ],
                "searchInput":{
                    ...
                }
            }
        }
    }
},

uniapp自定義導(dǎo)航欄

如何實(shí)現(xiàn)像微信、京東頂部導(dǎo)航欄，支持標(biāo)題居左、居中、搜索條、按鈕自定義。。。將navigationStyle設(shè)為custom或titleNView設(shè)為false時(shí)，原生導(dǎo)航欄不顯示，這時(shí)就能自定義導(dǎo)航欄

"globalStyle": { "navigationStyle": "custom" }

具體效果實(shí)例如下：

未標(biāo)題-1.png

不過(guò)在 H5、小程序、App端狀態(tài)欄需重新計(jì)算處理，下面為大家提供一種處理方法，在App.vue里面設(shè)置即可

onLaunch: function() {
    uni.getSystemInfo({
        success:function(e){
            Vue.prototype.statusBar = e.statusBarHeight
            // #ifndef MP
            if(e.platform == 'android') {
                Vue.prototype.customBar = e.statusBarHeight + 50
            }else {
                Vue.prototype.customBar = e.statusBarHeight + 45
            }
            // #endif
            
            // #ifdef MP-WEIXIN
            let custom = wx.getMenuButtonBoundingClientRect()
            Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
            // #endif
            
            // #ifdef MP-ALIPAY
            Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
            // #endif
        }
    })
},

360截圖20190916115938629.png

360截圖20190916120057354.png

360截圖20190916120005833.png

360截圖20190916120214555.png

360截圖20190916120037577.png

360截圖20190916120233291.png

360截圖20190916120251266.png

360截圖20190916120312117.png

360截圖20190807103937042.jpg

作者：xiaoyan2015
轉(zhuǎn)載：https://juejin.im/post/5d806bd36fb9a06ad005a2a7
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。