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 图片预览效果 推荐
Dec 22 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
Angular实现的进度条功能示例
Feb 18 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
yii操作cookie实例简介
2014/07/09 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
python映射列表实例分析
2015/01/26 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python模块搜索路径代码详解
2018/01/29 Python
python3实现基于用户的协同过滤
2018/05/31 Python
详解python中的数据类型和控制流
2019/08/08 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
详解Python中的路径问题
2020/09/02 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
什么是GWT的Module
2013/01/20 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
消防安全责任书范本
2014/04/15 职场文书
大学生工作自荐书
2014/06/16 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
人事任命通知
2015/04/20 职场文书
法律意见书范文
2015/05/20 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL