@minidesign/header v0.0.9

@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>

属性参数

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>