@minidesign/header

@minidesign/header

微信小程序自定义header。

• 
• 

Install

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

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

Usage

[page].json

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

[page].wxml

<header>Minidesign Header</header>

属性参数

Name	Type	Default	Description
mode	string	'classic'	模式，可选值： `'fashion'
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'

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>