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动画1.加载指示器
Aug 24 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
vue element ui validate 主动触发错误提示操作
Sep 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
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
php mysql数据库操作类
2008/06/04 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python实现飞行棋游戏
2020/02/05 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
一个入门级python爬虫教程详解
2021/01/27 Python
一些PHP的面试题
2015/05/06 面试题
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
公司会计岗位职责
2014/02/13 职场文书
酒鬼酒广告词
2014/03/21 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
未婚证明格式
2015/06/15 职场文书
基层工作经历证明
2015/06/19 职场文书
培训计划通知
2015/07/15 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android