mini-navigationbar

wx-mini-navigationbar

小程序自定义标题栏组件，支持设置背景图片，以及背景图片的显示mode，允许在左侧添加一个按钮，适配了Android方便微信的标题靠左显示

使用效果

使用方法

属性介绍

属性名	类型	默认值	是否必须	说明
menuSrc	String	''	否	按钮图片地址
bgImgSrc	String	''	否	背景图片地址
bgImgMode	String	aspectFill	否	背景图片的显示模式
title	String	''	否	标题
titleTextColor	String	''	否	字体和按钮以及loading图标的颜色，按钮和loading暂时只有黑白2色
backgroundColor	String	''	否	整个标题栏的背景颜色
loading	Boolean	false	否	是否是加载状态
backProxy	Boolean	false	否	是否重写了返回键

标题栏中属性的默认数据会自动获取json配置以及系统的默认数据，如果不需要动态更改样式，可以在json中设置，组件中同样起作用

事件介绍

属性名	detail
NaviBack	返回的逻辑方法
MenuTap	按钮的点击事件

"usingComponents": {
    "toolBar": "/component/toolbar"
},

<toolBar menuSrc='/image/menu_white.png' bindMenuTap='onMenuTap' bgImgSrc='/image/navi-bg.jpg' />

高度说明： 为了方便适配，这里给出自定义标题栏的计算公式： const MenuRect = wx.getMenuButtonBoundingClientRect() const statusBarHeight = wx.getSystemInfoSync().statusBarHeight; const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height +MenuRect.top