更新记录

0.0.1(2019-11-02) 下载此版本

根据 NavBar 导航栏(https://ext.dcloud.net.cn/plugin?id=52)自己写的一个导航栏,可适配刘海屏,目前自己测试了微信小程序,HTML5和Android,其他的未测,欢迎指出问题


平台兼容性

ZolysoftNavBar 导航栏

导航栏组件,主要用于头部导航,自动适配刘海屏,组件名:zolysoft-nav-bar

本插件根据 《NavBar 导航栏》 重写,用法与 《NavBar 导航栏》基本相同,不过此插件加入了刘海屏适配 《NavBar 导航栏》插件地址:

    https://ext.dcloud.net.cn/plugin?id=52

使用方式:

在 script 中引用组件

import zolysoftNavBar from "@/components/zolysoft-nav-bar/zolysoft-nav-bar.vue"

export default {
    components: {
        zolysoftNavBar
    }
}

在 template 中使用组件

<zolysoft-nav-bar 
    left-icon="back" 
    left-text="返回" 
    right-text="菜单" 
    title="导航栏组件"
    @click-left="toUpPage"
    @click-right="showMenu" >
</zolysoft-nav-bar>

NavBar 属性说明:

属性名 类型 默认值 说明
title String - 标题文字
left-text String - 右侧按钮文本
right-text String - 右侧按钮文本
left-icon String - 左侧按钮图标(图标类型参考 Icon 图标 type 属性)
right-icon String - 右侧按钮图标(图标类型参考 Icon 图标 type 属性)
fixed Boolean false 是否固定顶部
shadow Boolean true 导航栏下是否有阴影
color String #000000 图标和文字颜色
background-color String #FFFFFF 导航栏背景颜色
right-icon String - 右侧按钮图标(图标类型参考 Icon 图标 type 属性)
border Boolean false 是否显示底部边框

事件说明:

事件名称 说明 click-left 左侧按钮点击时触发 click-right 右侧按钮点击时触发

注:当left-icon为back时,默认给的事件为返回上一页,无需添加click-left

特殊说明

  1. 本插件图标依赖于uni-icons,没有的请自行下载 插件地址

    https://ext.dcloud.net.cn/plugin?id=28
  2. 有的页面需要用到下拉刷新时,刷新图标会显示到状态栏上,影响显示效果,建议做一下修改: 在App.vue的Style中添加一下代码:

    /*每个页面公共css */
    uni-page-refresh{
        margin-top: 30px;
    }
    uni-page-refresh .uni-page-refresh{
        z-index: 0;
    }

隐私、权限声明

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

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

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

许可协议

MIT协议

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