uni-app自定义顶部导航栏|仿微信、京东导航条

[xiaoyan_2018]

uniapp原生导航
uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，dcloud平台对app-plus做了详细说明：app-plus配置，不过目前暂支持H5、App端，不支持小程序。
https://segmentfault.com/a/1190000020404603

{  
    "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自定义导航栏
如何实现像微信、京东顶部导航栏，支持标题居左、居中、搜索条、按钮自定义。。。
将navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，这时就能自定义导航栏
"globalStyle": { "navigationStyle": "custom" }

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  
        }  
    })  
},

<header-bar :isBack="false" title="标题信息" titleTintColor="#fff">  
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>  
    <text slot="iconfont" class="uni_btnIco iconfont icon-search" @tap="aaa"></text>  
    <text slot="iconfont" class="uni_btnIco iconfont icon-tianjia" @tap="bbb"></text>  
    <!-- <text slot="string" class="uni_btnString" @tap="ccc">添加好友</text> -->  
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>  
</header-bar>

[NANU-NANA]

很好，谢谢分享。