uni-app自定义导航栏|仿微信顶部导航uni_headerBar,支持标题居左、居中、搜索条,按钮可传入文字/字体图标/图片javascript
uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面作一些配置便可。设置app-plus,dcloud平台对app-plus作了详细说明:app-plus配置,不过目前暂支持H五、App端,不支持小程序。vue
page.json配置app-plusjava
{ "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,写在相应的页面中便可。android
如何实现像淘宝、微信顶部导航栏,支持标题居左、居中、搜索条、按钮自定义。。。json
将navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,这时就能自定义导航栏小程序
` "globalStyle": { "navigationStyle": "custom" } `微信
具体效果实例以下:app
须要注意的是 H五、小程序、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 } }) },
<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>
<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>