miniprogram-custom-navigation-bar(小程序自定义头部导航栏)

特性

• 简单配置
• ionicons开源图标库

安装

1. 在小程序项目中启用 npm，

2. 执行npm i miniprogram-custom-navigation-bar --save或者执行yarn add miniprogram-custom-navigation-bar

3. 微信开发者工具执行构建npm，组件就添加到了小程序中

4. 然后引入到用到的页面，如果使用页面比较多，也可以直接放到app.json中

    "usingComponents": {
      "navigation-bar": "miniprogram-custom-navigation-bar/index"
    }
   

此时，就可以在wxml中使用navigation-bar组件了

属性

名字	类型	默认值	说明	版本要求
title	String	''	头部栏显示的标题
defaultHeight	Boolean	false	是否产生一个同高度的空白 view 块
proxyBack	Boolean	false	是否代理返回按钮点击事件

事件

事件	参数类型	说明	版本要求
navigateBack	null	当 proxyBack 值为 true 时会触发，取消用户点击返回按钮的默认行为
navBarHeight	Number	返回当前组件的高度，在组件初始化时触发

参数中的值在 evt.detail 中

实现原理

请移步 https://github.com/ljybill/miniprogram-utils/tree/master/custom-navigation-bar

贡献

本组件还在起步阶段，目前仅实现了基础功能，如果您有需求或在使用过程中遇到了问题，欢迎提issue，另外也可以根据自身业务下载源代码自行修改。