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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
js跳转页面方法总结
Jan 29 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
WebRTC记录音视频流(web技术分享)
Feb 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
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Python绘制七段数码管实例代码
2017/12/20 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python实现一个简单的ping工具方法
2019/01/31 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python 切分数组实例解析
2019/11/07 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
小学教师的个人自我鉴定
2013/10/24 职场文书
医院办公室主任职责
2013/12/29 职场文书
高校教师岗位职责
2014/03/18 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
罗马假日观后感
2015/06/08 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS