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

最近一直在学习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仿微信顶部导航条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-09-15

Android仿微信实现首字母导航条

本文介绍Android实现首字母导航条,先看张效果图,具体怎么实现看代码吧 具体的步骤 1.整体布局的显示 2. 实现A-Z的分组 3. 自定义A-Z的导航条 4. 中间显示/隐藏触摸到导航条具体的字母 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

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

Unity3d实现Flappy Bird游戏

本文实例为大家分享了Unity3d实现Flappy Bird的具体代码,供大家参考,具体内容如下 一.小鸟 在游戏中,小鸟并不做水平位移,而是通过障碍物的移动让小鸟有水平运动的感觉,小鸟只需要对鼠标的点击调整竖直加速度就可以了,同时加上水平旋转模仿原版的FlappyBird的运动.同时,还要对竖直位置进行判断,否则游戏不能正常结束. 这里贴上小鸟上附加的脚本代码 Player.cs using UnityEngine; using System.Collections; public class

微信小程序 配置顶部导航条标题颜色的实现方法

微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

Android仿微信5实现滑动导航条

本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi

Android仿微信底部按钮滑动变色

Android仿微信底部按钮滑动变色,这里只针对使用Fragment为Tab页的滑动操作,进行简单的变色讲解. 首先说下OnPageChangeListener这个监听 //这个监听有三个方法 public abstract void onPageScrollStateChanged (int state) public abstract void onPageScrolled (int position, float positionOffset, int positionOffsetPixe

Android仿微信对话列表滑动删除效果

微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理  1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2

Android实现简单底部导航栏 Android仿微信滑动切换效果

Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager; 3. 通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮; 代码实现: 1. 新建第一个自定义View, 图标 + 文字 的底部按钮; /** * 自定义控件

Android仿微信列表滑动删除之可滑动控件(一)

这次是列表滑动删除的第三波,仿微信的列表滑动删除.先上个效果图: 前面的文章里面说过开源框架SwipeListView的实现原理是每个列表item中包含上下两层view,普通状态下上层的view覆盖着下层的view,当用户滑开上层的view,下层的view就显示出来了.但是仔细观察微信列表的item,很明显并非这个实现方案,微信的item应该一个单层view,只不过这个item超出了所在的ListView的宽度,在用户滑动item的时候,item超出屏幕的view则会显示在屏幕之上,这种滑动实现

Android仿微信通讯录滑动快速定位功能

先给大家展示下效果图: 实现代码如下: 下面简单说下实现原理. public class IndexBar extends LinearLayout implements View.OnTouchListener { private static final String[] INDEXES = new String[]{"#", "A", "B", "C", "D", "E", &qu

Android仿微信activity滑动关闭效果

Android仿微信activity滑动关闭功能 1.利用具体利用v4包下的slidingPaneLayout实现透明的activity,代码如下: BaseActivity: public class BaseSlideCloseActivity extends AppCompatActivity implements SlidingPaneLayout.PanelSlideListener { @Override protected void onCreate(Bundle savedIns

Android仿微信滑动退出Activity

效果图: 原理: 原理一句话就能描述清楚.重写Activity的dispatchTouchEvent,滑动的时候拿到Activity栈中栈顶Activity的上一个Acticity的ContentView添加到栈顶Activity的DecorView中,滑动的过程中做视图平移,滑动结束之后把前面拿过来用的ContentView归还给上一个Activity,然后finish当前Activity. ActivityStack: 实现 Application.ActivityLifecycleCall

Android仿微信页面底部导航效果代码实现

大家在参考本地代码的时候要根据需要适当的修改,里面有冗余代码小编没有删除.好了,废话不多说了,一切让代码说话吧! 关键代码如下所示: .java里面的主要代码 public class MainActivity extends BaseActivity implements TabChangeListener { private Fragment[] fragments; private FragZaiXianYuYue fragZaiXianYuYue; private FragDaoLuJi