更新记录

1.0.11(2020-04-28)

字体放一号

1.0.10(2020-03-19)

  • 支持V3编译
查看更多

hx-navbar 适用于 uni-app 项目的头部导航组件

导航栏组件,主要用于头部导航,组件名:hx-navbar

本组件目前兼容微信小程序、H5、5+APP。

QQ群 954035921

如有问题可进群发图讨论

本组件支持模式:

  1. 普通固定顶部导航
  2. 透明导航
  3. 透明固定顶部导航
  4. 不固定普通导航
  5. 背景颜色线性渐变
  6. 滑动显示背景
  7. 左、中、右3个插槽;可关闭左右插槽使中间插槽铺满导航,实现高度自定义的导航需求

使用前提

需要先安装·uniapp·官方的uni-icons 图标组件,uni-icons官方组件下载地址:https://ext.dcloud.net.cn/plugin?id=28

使用方式

页面使用需在 script 中引用组件

import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
export default {
    components: {hxNavbar}
}

全局使用需在 main.js 中注册组件

import hxNavbar from "./components/hx-navbar/hx-navbar.vue"
Vue.component('hx-navbar',hxNavbar)

属性

基本属性

名称 类型 默认值 描述
back Boolean true 返回上一页,(设置后,leftIcon属性,和click-left事件将失效
height String 44px 导航栏高度(不包含状态栏高度)
barPlaceholder String auto 导航栏占位符 显示(show),隐藏(hidden),自动(auto:如果头部为固定fixed ,则显示占位符)
title String - 导航标题(当设置了标题,中间插槽将失效)
fixed Boolean false 固定头部
color String #000000 导航文字颜色(如果需要屏幕滑动后变色,参数则为数组,例子:['#000000','#ffffff']
backgroundColor Array [255, 255, 255] 导航背景颜色为RGB 编号(单色背景数组为[255,255,255],线性渐变背景[[236, 0, 140],[103, 57, 182],...]
pageScroll Object {} 屏幕滑动距离顶部的对象滑动渐变必要参数
backgroundColorLinearDeg String 45 导航背景线性渐变角度
backgroundImg String - 导航背景图片(背景图片优先级高于背景颜色)
transparent String show 背景透明(show 不透明,hidden 透明,auto 自动:滑动逐渐显示背景颜色,当头部固定时生效) 兼容性:头条小程序必须在页面上加 onPageScroll(e){} ,才能滑动显示背景,可参考dome7
shadow Boolean false 导航栏阴影
border Boolean false 导航栏边框

关于状态栏的属性

名称 类型 默认值 描述
statusBar Boolean true 包含状态栏
statusBarFontColor Array,String #000000 状态栏字体颜色,只支持#000000#FFFFFF(如果需要屏幕滑动变色,参数则为数组,例子:['#000000','#ffffff']
statusBarBackground String - 状态栏背景颜色,如果你想单独设置状态栏颜色,该属性是个不错的选择

关于插槽的属性

名称 类型 默认值 描述
leftIcon String - 左插槽图标,必须为 uni-icons 图标
rightIcon String - 右插槽图标,必须为 uni-icons 图标
leftSlot Boolean true 开启左插槽
rightSlot Boolean true 开启右插槽
leftSlidiSwitch Boolean false 屏幕滑动后 left插槽切换为leftAfter插槽
centerSlidiSwitch Boolean false 屏幕滑动后 default插槽切换为centerAfter插槽
rightSlidiSwitch Boolean false 屏幕滑动后 right插槽切换为rightAfter插槽

返回上一页为空时的处理属性

名称 类型 默认值 描述
backTabbarUrl String /pages/index/index 返回至指定的tabber页面(返回首页),当上一页为空时生效;全局使用推荐进组件修改backTabbarUrl的默认值
defaultBackUrl String - 返回至指定的普通页面,当上一页为空时生效;defaultBackUrl优先级高于backTabbarUrl;主要应用在返回失效时
<!-- 使用场景:假如刷新了当前页面,那么返回事件将失效。
这时用上 `defaultBackUrl` 或 `backTabbarUrl` 则能返回至指定页面-->
<hx-navbar left-text="关于" defaultBackUrl="/pages/user/setting/setting" />

插槽

名称 描述
left 左插槽 (可关闭该插槽 leftSlot 属性)
default 中间插槽(当设置了标题,中间插槽将失效)
right 右插槽 (可关闭该插槽 rightSlot 属性)
leftAfter 屏幕滑动后的左插槽 (需要开启leftSlidiSwitch属性才生效)
centerAfter 屏幕滑动后的中插槽 (需要开启centerSlidiSwitch属性才生效)
rightAfter 屏幕滑动后的右插槽 (需要开启rightSlidiSwitch属性才生效)
<hx-navbar>
    <view>标题栏(中间插槽)</view>
    <view slot="left">left(左插槽)</view>
    <view  slot="right">right(右插槽)</view>
</hx-navbar>

事件

名称 参数 描述
click-left - 左侧按钮点击时触发,此事件将覆盖 返回
click-right - 右侧按钮点击时触发
scroll - 监听滚动条,回调参数为滚动距离;固定头部时生效;应用场景:如滚动到多少时触发某些事件

使用例子

简单使用

<hx-navbar title="我爱新疆" left-text="返回" />

背景颜色线性渐变、头部固定

<hx-navbar 
    title="颜色渐变" 
    :back="false"
    :fixed="true"
    color="#ffffff"
    :background-color="[[28, 187, 180],[141, 198, 63]]">
</hx-navbar>

滑动显示背景

<!-- 该例子取消了导航占位符 -->
<hx-navbar 
    title="颜色渐变" 
    :back="false"
    :fixed="true"
    color="#ffffff"
    barPlaceholder="hidden"
    transparent="auto"
    :background-color="[[28, 187, 180],[141, 198, 63]]"
    :pageScroll.sync="scrollData">
</hx-navbar>
data() {
    return {
        scrollData: {},
    }
},
//必须在页面加 onPageScroll(e){} ,才能滑动显示背景
onPageScroll(e){
    this.scrollData = e;
},

左中插槽演示

<hx-navbar  
    :back="false" 
    :fixed="true"
    right-icon="scan">
    <block slot="left">
        <view class="city">
            <view>新疆</view>
            <uni-icons type="arrowdown" color="#333333" size="22" />
        </view>
    </block>
    <view class="input-view">
        <uni-icons type="search" size="22" color="#666666" />
        <input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
    </view>
</hx-navbar>

/*css 用于演示插槽自定义样式*/
<style>
    .city{
        display: flex;flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-left: 8px;
        white-space: nowrap;
    }
</style>

关闭左右插槽演示

<hx-navbar  :back="false" :fixed="true" :leftSlot='false' :rightSlot='false'>
    <view style="display: flex;">
        <view class="city">
            <view>新疆</view>
            <uni-icons type="arrowdown" size="22" />
        </view>
        <view class="input-view" style="width: 100%;">
            <uni-icons type="search" size="22" color="#666666" />
            <input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
        </view>
        <uni-icons type="scan" size="22" style="line-height: 44px;padding-left: 8px;"/>
    </view>
</hx-navbar>
/*css 用于演示插槽自定义样式*/
<style>
    .city{
        display: flex;flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-left: 8px;
        white-space: nowrap;
    }
</style>

屏幕滑动切换显示插槽

<!-- 该例子演示中间插槽、右插槽屏幕滑动后的变换 -->
<hx-navbar  
:border="true" 
:centerSlidiSwitch="true"
:rightSlidiSwitch="true"
:fixed="true"
:pageScroll.sync="scrollData">
    <view style="text-align: center;width: 100%;">
        <text>帮助反馈</text>
    </view>
    <view slot="centerAfter" style="text-align: center;width: 100%;">
        <text>咨询</text>
    </view>
    <block slot="right">
        <uni-icons type="qq" size="30" ></uni-icons>
    </block>
    <block slot="rightAfter">
        <uni-icons type="chat" size="30" ></uni-icons>
    </block>
</hx-navbar>
data() {
    return {
        scrollData: {},
    }
},
//必须在页面加 onPageScroll(e){} ,才能滑动显示
onPageScroll(e){
    this.scrollData = e;
},

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问