使用效果
使用方法
属性介绍
| 属性名 | 类型 | 默认值 | 是否必须 | 说明 |
|---|---|---|---|---|
| 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
不错的组件
赞
棒
不错，赞一个