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": "/f",
"fontSize": "22px",
"float": "left"
},
{
"text": "\ue62c",
"fontSrc": "/f",
"fontSize": "22px"
}
],
"searchInput":{
...
}
}
}
}
},
对于如何监听按钮、输⼊框事件，uni-app给出了相应API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在响应的页⾯中即可。
那如何可以实现像京东、淘宝、顶部导航栏，如加⼊城市定位、搜索、⾃定图⽚/图标、圆点提⽰。。。
上⾯的⽅法是可以满⾜⼀般项⽬需求，但是在⼩程序⾥则失效了，⽽且⼀些复杂的导航栏就不能很好兼顾，这时只能寻求其它替代⽅法了
将navigationStyle设为custom或titleNView设为false时，原⽣导航栏不显⽰，这时就能⾃定义导航栏
"globalStyle": {"navigationStyle": "custom"}
下⾯是简单测试实例：
这⾥要注意的是，H5、⼩程序、App端状态栏都不⼀样，需要重新计算处理，我这⾥已经处理好了，可直接使⽤，在App.vue⾥⾯设置即可
onLaunch: function() {
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 + p - 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" >添加好友</text>
</header-bar>
⽀持传⼊的属性，另外还⽤到了vue插槽slot
/***
  isBack    是否返回按钮
  title    标题
  titleTintColor  标题颜⾊
  bgColor    背景
  center    标题居中
  search    搜索条
  searchRadius  圆形搜索条
reactnative开发  fixed    是否固定
*/
<template>
<view class="uni_topbar" :>
<view class="inner flexbox flex_alignc" :class="[fixed ? 'fixed' : '']" :>  <!-- 返回 -->
<!-- <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' : '']" : 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- />
</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⾃定义导航栏按钮|uniapp仿顶部导航条，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。