# i-header 

> 跟部组件



## [Demo](https://h5.m.taobao.com/trip/wxc-minibar/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-minibar%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1IK_TfxPI8KJjSspfXXcCFXXa-750-1334.jpg" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1EJY_SpXXXXcmXpXXXXXXXXXX-200-200.png" width="160"/>

## 使用方法

```vue
<template>
   <i-root ></i-root>
</template>

<script>
  import { iRoot } from 'weex-ui';
  const modal = weex.requireModule('modal');

  export default {
    components: { iRoot },
    methods: {
      
    }
  };
</script>
```

更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/minibar/index.vue)


### 可配置参数

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| type | `String` |`N`| `-` | 背景颜色类型 default gray等 |
| isShowIphonex | `Boolean` |`N`| `false` |  是否展示iphoneX 底部 |

### Slot
当以上配置都不满足时候，你可以使用 slot 来自定义设置你的组件。   

1. `<slot></slot>`

### 事件回调

```
// @viewappear="viewappear"  如果一个位于某个可滚动区域内的组件被绑定了 viewappear 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发
```