最近一直在学习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技术也做一个实战聊天项目，届时也会分享出来。
