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>
