uni app仿微信顶部导航条功能


Posted in Javascript onSeptember 17, 2019

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

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

uni app仿微信顶部导航条功能

在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,只需把onNavigationBarButtonTaponNavigationBarSearchInputChanged,写在响应的页面中即可。

 那如何可以实现像京东、淘宝、微信顶部导航栏,如加入城市定位、搜索、自定图片/图标、圆点提示。。。

上面的方法是可以满足一般项目需求,但是在小程序里则失效了,而且一些复杂的导航栏就不能很好兼顾,这时只能寻求其它替代方法了

将navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,这时就能自定义导航栏

"globalStyle": { "navigationStyle": "custom" }

下面是简单测试实例:

uni app仿微信顶部导航条功能

这里要注意的是,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仿微信顶部导航条功能

<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仿微信顶部导航条功能

uni app仿微信顶部导航条功能

uni app仿微信顶部导航条功能

<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" style="color: #2B9939;">添加好友</text>
</header-bar>

uni app仿微信顶部导航条功能

uni app仿微信顶部导航条功能

uni app仿微信顶部导航条功能

<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仿微信顶部导航条功能

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

Javascript 相关文章推荐
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 #Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 #Javascript
解决layui轮播图有数据不显示的情况
Sep 16 #Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 #Javascript
关于Layui Table隐藏列问题
Sep 16 #Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 #Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 #Javascript
You might like
Look And Say 序列php实现代码
2011/05/22 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
留学推荐信怎么写
2014/01/25 职场文书
委托书范本
2014/04/02 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python