适用于 uni-app 项目的头部导航组件,支持nvue(停止更新) - 更新日志

2.0.5(2021-05-12)

  1. 支持uni_modules

2.0.4(2020-10-21)

  1. 修改在nvue环境,无法定位

2.0.3(2020-06-29)

修改背景颜色显示bug

2.0.2(2020-04-20)

  1. 修复透明状态下中间插槽问题
  2. 优化代码

2.0.1(2020-04-17)

  1. 修复小程序右边按钮被挡住

  2. 修改底边阴影背景色为纯白色的时候才显示

2.0.0(2020-04-14)

1.支持nvue编译 2.支持V3编译 3.增加导航阴影控制 4.优化手机状态栏颜色改变 5.优化透明渐变导航状态栏颜色改变

1.1.1(2020-01-07)

修复type=transparent 不透明bug

1.1.0(2019-12-09)

新增背景颜色渐变功能(支持复杂的角度渐变)

1.0.6(2019-11-14)

修复iPhone X不居中

1.0.5(2019-11-04)

  1. 新增功能 自定义返回事件
  2. 图片提取本地
  3. 修复标题不居中

1.0.4(2019-10-21)

1.修改导航右插槽未竖居中对齐bug

1.0.3(2019-10-12)

  1. 新增白色返回图标和白色返回首页图标
  2. 透明导航返回按钮样式优化
  3. 双返回按钮样式优化

1.0.2(2019-10-12)

  1. 增加home参数,可手动控制显示返回首页按钮(首页地址在源文件里配置)
  2. 修改功能 右插槽 right 从小程序没有改成有

1.0.1(2019-10-08)

1.bgColor 导航背景色可动态修改 2.fontColor 导航字体颜色可动态修改 3.title 标题可动态修改 4.transparentFixedFontColor 透明固定的时候字体颜色可动态修改

1.0.0(2019-09-27)

z-nav-bar 适用于 uni-app 项目的头部导航组件

导航栏组件,主要用于头部导航,组件名:z-nav-bar,代码块: z-nav-bar。 本组件目前兼容微信小程序、H5、5+APP。其他平台没试过 本组件支持模式:1.普通固定顶部导航 2.透明导航 3.透明固定顶部导航 4.不固定普通导航 本组件内置特殊功能: 1.fontColor字体颜色为白色的时候手机状态栏会自动显示白色,否则显示灰色 2.页面为第一个页面时左上角自动显示返回主页的图标(具体看组件:z-nav-bar/nav-bar.vue =>页面script)

使用方法

在main.js引入组件,并注册全局组件

import zNavBar from "@/components/common/z-nav-bar/nav-bar";
Vue.component("z-nav-bar", zNavBar);

或者在页面script中引入组件,并注册组件

import zNavBar from "@/components/common/z-nav-bar/nav-bar";
export default {
components: {zNavBar}
}

在 template 中使用组件(案例一)

//默认特性:左上角有返回箭头,nav-bar导航固定在顶部、标题居中
<z-nav-bar>我的</z-nav-bar>

在 template 中使用组件(案例二)

//特性:无返回箭头、字体色为白色、标题左对齐、nav-bar导航透明并不固定在顶部、右边插槽有按钮
<z-nav-bar :back="false" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
<view class="icon_setUp" slot="right">设置</view>
</z-nav-bar>

在 template 中使用组件(案例三:透明|固定|滑动逐渐变颜色|两种状态的按钮插槽)

//特性:有返回箭头、nav-bar导航透明并固定在顶部、透明状态字体为白色、页面想下滑动nav-bar导航条逐渐变白色、右边插槽有按钮
<z-nav-bar transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
<view class="transparent_fixed_preview" slot="transparentFixedRight" @click="onPreview">预览</view> //透明状态下的按钮
<view class="preview" slot="right" @click="onPreview">预览</view> //不状态下的按钮
</z-nav-bar>

在 template 中使用组件(案例四:搜索框|地区选择)

//特性:无返回箭头、nav-bar导航固定在顶部、地区选择、搜索框
<z-nav-bar :back="false">
<view slot="left" class="address_select">深圳市</view>
<view slot="right" class="search_box" @click="onPageJump('/pages/home/search')">
<text class="icon_search"></text>
<text class="tips">搜索目的地/职位等</text>
</view>
</z-nav-bar>

属性

名称 类型 默认值 描述
back Boolean true 返回上一页面
bgColor String #FFF 导航背景颜色
fontColor String #000 导航字体颜色
titleCenter Boolean true 标题title居中
title String -- 标题title值
transparentFixedFontColor String #000 导航type类型为transparentFixed时透明状态下的字体颜色
type String fixed 导航类型,可选:1.fixed固定导航 2.ordinary不固定导航 3.transparent透明不固定导航 4.transparentFixed透明固定导航

插槽

名称 描述
left 左插槽
default 中间标题插槽(type类型为transparentFixed时插槽只会穿透到实色背景下)
right 右插槽(只有H5和5+App才有)
transparentFixedLeft 导航type类型为transparentFixed时透明状态下左插槽
transparentFixedRight 导航type类型为transparentFixed时透明状态下右插槽(只有H5和5+App才有)

事件(type类型为transparentFixed时可用)

名称 参数 描述
scroll 滚动条到顶部距离 代替页面的onPageScroll函数