Question

置顶custom 模式下导航组件精选热门

2018-05-091087浏览

自己封装了一个 custom 模式下的导航组件，欢迎 star

wx-com-header

小程序在 custom 所有的页面的顶部都会消失，然而实际项目中我们可能只需要部分页面全屏，这就要自定义一个顶部栏。

这个组件高度规范参照 iOS 及 Android 的 UI 规范即：

	iOS	Android
status bar	一般为 `20px`<br>iPhone X 下为 `44px`	`24px`
navigation bar	`44px`	`48px`

将 component 目录下的文件导入项目中

在使用的页面引入组件

{
  "usingComponents": {
    "header": "../component/header" // 导入的文件路径
  }
}

页面中使用

<header background-color="#000" color="#fff" fixed>Title</header>

配置项	说明
fixed	导航是否固定，默认为 `false`
background-color	导航背景色，参考 css 颜色写法，默认为 `#fff`
color	导航文字颜色，参考 css 颜色写法，默认为 `#000`
back	显示返回按钮，当传入为数字时，则为 `wx.navigateBack` 的 `delta` 参数

组件GitHub 地址