评论

自定义标题栏

自定义标题栏组件,支持设置背景图片,以及背景图片的显示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

Github地址:https://github.com/Aracy/wx-mini-navigationbar

最后一次编辑于  2019-05-21  
点赞 8
收藏
评论

4 个评论

  • aholy.97
    aholy.97
    2019-05-28

    不错的组件

    2019-05-28
    赞同
    回复
  • log琥珀
    log琥珀
    2019-05-24

    2019-05-24
    赞同
    回复
  • 。
    2019-05-22

    2019-05-22
    赞同
    回复
  • 爱会多美
    爱会多美
    2019-05-21

    不错,赞一个

    2019-05-21
    赞同
    回复
登录 后发表内容