### List 列表

列表组件，组件名：``uni-list``、``uni-list-item``，代码块： uList。

**使用方式：**

在 ``script`` 中引用组件 

```javascript
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
    components: {uniList,uniListItem}
}
```

List 一般用法

```html
<uni-list>
    <uni-list-item title="标题文字" show-arrow="false"></uni-list-item>
    <uni-list-item title="标题文字"></uni-list-item>
    <uni-list-item title="标题文字" show-badge="true" badge-text="12"></uni-list-item>
    <uni-list-item title="禁用状态" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
</uni-list>
```

带描述信息

```html
<uni-list>
    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>
    <uni-list-item title="标题文字" note="描述信息" show-badge="true" badge-text="12"></uni-list-item>
</uni-list>
```

包含图片

```html
<uni-list>
    <uni-list-item title="标题文字" thumb="http://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></uni-list-item>
</uni-list>
```

包含图标

```html
<uni-list>
    <uni-list-item title="标题文字" 
        show-extra-icon="true" 
        :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}">
    </uni-list-item>
</uni-list>
```

显示Switch

```html
<uni-list>
    <uni-list-item title="标题文字" show-switch="true" show-arrow="false"></uni-list-item>
</uni-list>
```

实际效果参考：[https://github.com/dcloudio/uni-ui](https://github.com/dcloudio/uni-ui)

**uniListItem 属性说明：**

|属性名|类型|默认值	|说明|
|---|----|---|---|
|title|String|-|标题|
|note|String|-|描述|
|disabled|Boolean|false|是否禁用|
|show-arrow|Boolean|true|是否显示箭头图标|
|show-badge|Boolean|false|是否显示数字角标|
|badge-text|String|-|数字角标内容|
|badge-type|String|-|数字角标类型，参考[Badge 数字角标](https://ext.dcloud.net.cn/plugin?id=21)|
|show-switch|Boolean|false|是否显示Switch|
|switch-checked|Boolean|false|Switch是否被选中|
|show-extra-icon|Boolean|false|左侧是否显示扩展图标|
|extra-icon|Object|-|扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [Iocn 图标](https://ext.dcloud.net.cn/plugin?id=28)|
|thumb|String|-|左侧缩略图，若thumb有值，则不会显示扩展图标|

**uniListItem 事件说明：**

|事件称名|说明|返回参数|
|---|----|---|
|click|点击 uniListItem 触发事件|-|
|switchChange|点击切换 Switch 时触发|{value:checked}|