uni-app自定义导航栏|顶部导航按钮+搜索+圆点

基于uni-app自定义实现导航栏，类似微信、京东、淘宝顶部导航条，支持背景渐变、标题居左/居中、搜索条，圆点提示，按钮可自定义传入文字/字体图标/图片

uniapp原生导航

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

{  
    "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>

<header-bar :isBack="true" titleTintColor="#fff" :bgColor="{'background-image': 'linear-gradient(45deg, #007AFF 10%, #005cbf)'}" search>  
    <text slot="back" class="uni_btnIco iconfont icon-arrL"></text>  
    <text slot="iconfont" class="uni_btnIco iconfont icon-choose03" @tap="aaa"></text>  
    <image slot="image" class="uni_btnImage" src="../../static/logo.png" mode="widthFix" @tap="ddd"></image>  
</header-bar>

<header-bar :isBack="true" title="我的" titleTintColor="#fff" :bgColor="{background: '#353535'}">  
    <text slot="back" class="uni_btnIco iconfont icon-close"></text>  
    <text slot="iconfont" class="uni_btnIco iconfont icon-search"></text>  
    <text slot="string" class="uni_btnString" style="color: #2B9939;">添加好友</text>  
</header-bar>

/**  
 * @tpl 顶部导航模板（自定义） by andy  Q：282310962  
 */  
<template>  
    <view class="uni_topbar" :style="style">  
        <view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px', 'color': titleTintColor}, bgColor]">  
            <!-- 返回 -->  
            <!-- <text class="uni_icoBack iconfont icon-arrL" v-if="isBack" @tap="goBack"></text> -->  
            <view v-if="isBack" @tap="goBack">  
                <slot name="back"></slot>  
            </view>  
            <slot name="headerL"></slot>  
            <!-- 标题 -->  
            <!-- #ifndef MP -->  
            <view class="flex1" v-if="!search && center"></view>  
            <!-- #endif -->  
            <view class="uni_title flex1" :class="[center ? 'uni_titleCenter' : '']" :style="[isBack ? {'font-size': '32upx', 'padding-left': '0'} : '']" v-if="!search && title">  
                {{title}}  
            </view>  
            <view class="uni_search flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />  
                <input class="uni_searchIpt flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />  
            </view>  
            <!-- 右侧 -->  
            <view class="uni_headerRight flexbox flex_row flex_alignc">  
                <slot name="iconfont"></slot>  
                <slot name="string"></slot>  
                <slot name="image"></slot>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                statusBarH: this.statusBar,  
                customBarH: this.customBar  
            }  
        },  
        props: {  
            isBack: { type: [Boolean, String], default: true },  
            title: { type: String, default: '' },  
            titleTintColor: { type: String, default: '#fff' },  
            bgColor: Object,  
            center: { type: [Boolean, String], default: false },  
            search: { type: [Boolean, String], default: false },  
            searchRadius: { type: [Boolean, String], default: false },  
            fixed: { type: [Boolean, String], default: false },  
        },  
        computed: {  
            style() {  
                let _style = `height: ${this.customBarH}px;`  
                return _style  
            }  
        },  
        methods: {  
            goBack() {  
                uni.navigateBack()  
            }  
        }  
    }  
</script>

今天的分享就到这里啦。
附上之前开发的RN项目，里面也含有自定义导航条，喜欢能喜欢
ReactNative聊天室项目实例