# i-list-item 

> 列表组件


  
## [Demo](https://h5.m.taobao.com/trip/i-cell/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fi-cell%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1mIA5c5qAXuNjy1XdXXaYcVXa-750-1334.jpg" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB15ta_SpXXXXcFaVXXXXXXXXXX-191-197.png" width="160"/>

## 使用方法

```vue
<template>
  <div class="container">
    <i-list-item leftText='test' rightText='rightText' @rightClick="rightClick"></i-list-item>
  </div>
</template>

<script>
  import { iListItem } from 'weex-ui';
  export default {
    components: { iListItem },
    methods: {
      rightClick (e) {
        console.log(e)
      }
    }
  };
</script>
```
更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/cell/index.vue)


### 可配置参数

| Prop      | Type   |Required  | Default   | Description  |
|-------------|------------|--------|--------|-----|
| styleEx | `Object` |`N`| `{}` |  列表样式 |
| leftIcon | `String` | `N`| `-` |  左边icon |
| leftText | `String` | `N`| `-` | 左侧文案 |
| leftIconSize | `String` | `N`| `-` |  左边icon大小 |
| leftIconColor | `String` | `N`| `-` |  左边icon颜色 |
| rightIcon | `String` | `N`| `-` |  右边icon |
| rightIconSize | `number` | `N`| `26` |  右边icon大小 |
| rightIconColor | `String` | `N`| `-` |  右边icon颜色 |
| rightText | `String` | `N`| `-` |  右侧文案 |
| rightTextColor | `String` | `N`| `#9b9b9b` |  右侧文案颜色 |
| rightIconLeft | `String` | `N`| `-` | 右边icon距离左边位置  |
| height | `number` | `N`| `70` |  列表高度 |
| rightWidth | `number` | `Y`| `100` |  列表右边盒子宽度 |
| paddingLeft | `number` | `Y`| `20` |  列表中间盒子左边内边距 |
| paddingRight | `number` | `N`| `10` |  列表中间盒子右边内边距 |
| listPaddingTop | `number` | `N`| `30` |  列表顶部内边距 |
| listPaddingBottom | `number` | `N`| `30` |  列表底部内边距 |
| borderBottomWidth | `number` | `N`| `1` |  列表border 宽度|







### 事件回调
```
//列表点击事件回调  `@onClick="onClick"`  
//点击右侧事件回调  `@rightClick="rightClick"`  
//点击左侧事件回调  `@leftClick="leftClick"` 
  
```