更新记录

1.0.3(2020-06-05)

1.0.3-修复回退按钮颜色bug

1.0.2(2020-06-04)

1.0.2-修复scss文件缺失

查看更多

平台兼容性

navBar自定义导航栏(适配小程序胶囊不同高度位置)

自定义导航栏,组件名:navBar,代码块: navBar。

使用方式

script 中引用组件

全局引用,在main.js中引用

import NavBar from '@/components/lz-navBar/navBar.vue'
Vue.component("NavBar", NavBar);

按需引用

import navBar from "@/components/lz-navBar/navBar.vue"
export default {
    components: {navBar}
}

template 中使用组件

使用默认标题栏

<NavBar :backBtn="true" title="发现" background="#f5f5f5"color="#333"></NavBar>

自定义标题栏

<NavBar background="#11274C" :backBtn="false"><image class="margin-l30" src="/static/image/logo.png" mode="scaleToFill"></image></NavBar>

属性说明

属性名 类型 默认值 说明
Background String #fff 导航栏背景颜色
color String #333 图标、标题颜色
title String - 标题内容
backBtn Boolean true 是否显示标题和返回按钮

Tips

  • 本组件依赖 uni-icons 组件,请与uni-icons组件配合使用
  • 要自定义导航栏内容backBtn 必须设为 false ,title 为空或者去掉
  • 导航栏最初使用position:sticky,考虑到iOS页面滑动的问题最终改为position:fixed,请按需修改
  • 兼容app,支付宝、百度等小程序没有测试过,有问题请反馈

隐私、权限声明

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

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

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

许可协议

MIT协议

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