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


Posted in Javascript onNovember 12, 2019

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

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

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

在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"}

下面是简单测试实例:

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

这里要注意的是,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字体图标、另外还可自定传入图片

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

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

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

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

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

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

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

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

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

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

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

支持传入的属性,另外还用到了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自定义导航栏按钮|uniapp仿微信顶部导航条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 #Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 #Javascript
vuex实现数据状态持久化
Nov 11 #Javascript
vue 更改连接后台的api示例
Nov 11 #Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 #Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 #Javascript
vuex存储token示例
Nov 11 #Javascript
You might like
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
php xhprof使用实例详解
2019/04/15 PHP
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python Pillow图像处理方法汇总
2019/10/16 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
数字漫画:comiXology
2020/06/13 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
教师党员一句话承诺
2014/03/28 职场文书
课外访万家心得体会
2014/09/03 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
村官个人总结范文
2015/03/03 职场文书
晚会开场白和结束语
2015/05/29 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python