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 相关文章推荐
JS操作Cookies的小例子
Oct 15 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
node.js的事件机制
Feb 08 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
Laravel 5 学习笔记
2015/03/06 PHP
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python中正则表达式与模式匹配
2019/05/07 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python容器类型公共方法总结
2020/08/19 Python
幼师专业毕业生自荐信
2013/09/29 职场文书
求职简历自荐信
2013/10/20 职场文书
银行员工辞职信范文
2014/01/20 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
售后服务承诺书模板
2014/05/21 职场文书
家庭贫困证明
2014/09/23 职场文书
物资采购管理制度
2015/08/06 职场文书
清洁工工作总结
2015/08/11 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
Java界面编程实现界面跳转
2022/06/16 Java/Android