uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。

在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到app平台的特定样式。dcloud平台对app-plus做了详细说明：，需注意 目前暂支持h5、app端，不支持小程序。

在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":{
                    ...
                }
            }
        }
    }
},

对于如何监听按钮、输入框事件，uni-app给出了相应api，只需把onnavigationbarbuttontap和onnavigationbarsearchinputchanged，写在响应的页面中即可。

 

那如何可以实现像京东、淘宝、微信顶部导航栏，如加入城市定位、搜索、自定图片/图标、圆点提示。。。

上面的方法是可以满足一般项目需求，但是在小程序里则失效了，而且一些复杂的导航栏就不能很好兼顾，这时只能寻求其它替代方法了

将navigationstyle设为custom或titlenview设为false时，原生导航栏不显示，这时就能自定义导航栏

"globalstyle": { "navigationstyle": "custom" }

下面是简单测试实例：

这里要注意的是，h5、小程序、app端状态栏都不一样，需要重新计算处理，我这里已经处理好了，可直接使用，在app.vue里面设置即可

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

啧啧啧，看下面的效果，是不是觉得很眼熟，没错，就是基于uni-app简单的实现了一个仿微信顶部导航条

顶部的图标使用iconfont字体图标、另外还可自定传入图片

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

支持传入的属性，另外还用到了vue插槽slot

/***
　　isback              是否返回按钮
　　title               标题
　　titletintcolor      标题颜色
　　bgcolor             背景
　　center              标题居中
　　search              搜索条
　　searchradius        圆形搜索条
　　fixed               是否固定
*/

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

最后附上一个基于reactnative实现的自定义导航条的聊天室项目

另外后续准备使用uni-app技术也做一个实战聊天项目，届时也会分享出来。