uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

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

在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可。设置app-plus,配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5、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,只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged,写在响应的页面中即可。

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

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

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

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

下面是简单测试实例:

这里要注意的是,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字体图标、另外还可自定传入图片

<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>

<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>

支持传入的属性,另外还用到了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实现的自定义导航条的聊天室项目

https://www.jb51.net/article/174036.htm

总结

以上所述是小编给大家介绍的uni-app自定义导航栏按钮|uniapp仿微信顶部导航条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

  • 详解使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • Django1.11配合uni-app发起微信支付的实现

    Django1.11配合uni-app发起微信支付! 经过三天的断断续续的奋战,我终于是干动了微信支付.为了以后不忘记,现在来一篇教程,来来来,开干!!! 一.准备阶段 1.准备阶段我们需要去微信官网申请一个小程序或者公众号.获得AppID和AppSecret. 2.去微信商户平台 成为商家,开通JSAPI用来获得商户号和自己配置的钥匙.然后再商户平台上面绑定小程序appid. (点击下面图片进入官方链接!) 在配置里面配置一个自己的key,需要记住后台开发的时候需要! 关联后即可在小程序管理页

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

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • uniapp 仿微信的右边下拉选择弹出框的实现代码

    在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件 这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单 这里首先用一个单独的页面存放这个组件 <template> //这里是搜索框的输入框 不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arriv

  • Android 高仿微信支付数字键盘功能

    现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • iOS高仿微信文章悬浮球功能

    前言 微信在最新版本6.6.7,新加了一个文章悬浮球功能.当你正在阅读文章的时候,突然有好友发来了紧急消息,你需要立即回复.又或者你刚好路过小吃店,需要临时打开微信支付,等等临时中断阅读的情况.以前只有退出文章详情页面,处理完事情之后,再挨着挨着找到原来的文章.对于我们这种重度微信使用者来说,每次遭遇这种情况,真的很蛋疼.所以,当这个功能推出的事情,立马更新了最新版本,这个功能感觉就像遇到了知心人一样,用起来十分顺手.可以通过下面的动图感受一下 其实悬浮球的概念早就有了.比如360助手的流量监控

  • Vue.js仿微信聊天窗口展示组件功能

    源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

  • Android仿微信右滑返回功能的实例代码

    先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的),  这些可以实现onTouchEvent来实现. 接着就是返回时,有滑动效果,很显然这个是Acitivty切换动画实现的.好啦,分析完了就开干.下面上代码: @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case Mot

  • iOS应用开发中导航栏按钮UIBarButtonItem的添加教程

    1.UINavigationController导航控制器如何使用 UINavigationController可以翻译为导航控制器,在iOS里经常用到. 我们看看它的如何使用: 下面的图显示了导航控制器的流程.最左侧是根视图,当用户点击其中的General项时 ,General视图会滑入屏幕:当用户继续点击Auto-Lock项时,Auto-Lock视图将滑入屏幕.相应地,在对象管理上,导航控制器使用了导航堆栈.根视图控制器在堆栈最底层,接下来入栈的是General视图控制器和Auto-Lock

  • Android项目实战之仿网易顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部导航栏,但是Android这样的移动设备内存是受限的,那么多界面缓存到内存中,很容易导致内存溢出,这个是比较致命的,所以不得不考虑.虽然我在之前也做过网易的顶部导航栏但是方式并不好,就像使用viewpager做一些复杂的界面由于图片占用内存过多,很容易导致内存溢出,学习了今天的内容大家做一下对比相信

  • Android仿新闻顶部导航标签切换效果

    最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo.具体看下图. 那么大致上我们会用到这些知识. 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步. 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了.所以这里就自定义一个HorizontalScrollView impor

随机推荐