@minidesign/header

微信小程序自定义header。

Install

• 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包
• 如果你的不支持，那么可以先下载下来，在手动拷贝到你的components/header文件夹下，在使用的细节上调整一下就行了。

1. npm install --save @minidesign/header
2. 【微信开发者工具】->【工具】-> 【构建 npm】
3. ok. （别忘记执行【构建 npm】步骤）

Usage

[page].json

{
  "usingComponents": {
    "header": "@minidesign/header"
  }
}

[page].wxml

<header>Minidesign Header</header>

属性参数

| Name | Type | Default | Description | | --------------- | -------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | | mode | string | 'classic' | 模式，可选值： 'fashion' | 'classic' | 'cover-fashion' | 'cover-classic' | 'custom' | 'cover-custom' | | title | string / void | '' | 标题，默认取小程序app.json文件的配置值，会覆盖默认slot | | backgroundcolor | string / void | '#ffffff' | 背景颜色，正确的颜色值都可 | | animation | AnimationData / void | {} | 动画 Data | | height | number / void | 自适应 | 头部高度，默认自适应，推荐默认 | | home | string / void | 'pages/index/index' | 首页按钮的路由，仅在 mode="fashion"时有效，默认自动识别小程序配置文件的首页，当 API 无效时获取该值 | | container-class | string / void | '' | 容器样式 | | title-class | string / void | '' | 标题样式 | | left-class | string / void | '' | 左边菜单容器样式 | | menu-class | string / void | '' | 菜单样式，仅在 mode="fashion"时有效 | | menustyle | string / void | 'dark' | 菜单模式选择，可选值：'dark' | 'light'，仅在mode = 'fashion' | 'cover-fashion' | 'classic' | 'cover-classic'时有效 |

Mode 值说明

fashion，流行模式

拥有胶囊菜单，包含【返回】、【首页】两大功能，自动识别当前为首页时菜单不展示

classic，经典模式

拥有经典返回菜单，包含【返回】功能，自动识别当前为首页时菜单不展示。

cover-fashion，流行覆盖模式

fashion的cover-view版本，用于覆盖微信小程序原生组建

cover-classic，经典覆盖模式

classic的cover-view版本，用于覆盖微信小程序原生组建

custom，自定义模式

自定义模式，可完全自定义左侧菜单和中间标题。

cover-custom，自定义覆盖模式

custom的cover-view版本，用于覆盖微信小程序原生组建

Slot 说明

默认Slot： <slot></slot>

默认的slot会放置在title即标题的地方，同时，若设置了title属性，则忽略默认slot。

<header>这里是默认的slot</header>

自定义Slot： <slot name="left"></slot>、<slot name="title"></slot>

自定义 slot 在mode属性为custom | cover-custom时起效，为left左侧菜、title标题。

<header>
  <view slot="left">Back</view>
  <view slot="title">Minidesign</view>
</header>