##组件名称

filter、filter-item组件

## 示例图

## filter属性说明

|属性名 | 类型 | 必填 | 默认值 |说明 |
|---|---|---|---|---|
|title |String |否|请选择|默认显示文案|
|show |Boolean |否|false|是否显示|
|max-title-width |String |否|115.84|filter标题的最大宽度，超出后显示省略号，单位rpx|
|position |String |否|center|filter标题的位置，同flex的justify-content属性值|

## filter-item属性说明

|属性名 | 类型 | 必填 | 默认值 |说明 |
|---|---|---|---|---|
|value |String |是|-|唯一标识符|
|text |String |是|-|显示文案|
|selected |Boolean |否|false|是否选中|
|bindchange |String |否|-|选中选项回调事件|

## 示例代码

json:
```
    {
        "navigationBarTitleText": "view",
        "usingComponents": {
            "zw-filter": "yourpath/components/Filter/src/index",
            "zw-filter-item": "yourpath/components/FilterItem/index"
        }
    }
```

swan:
```
    <view style="display:flex;">
        <zw-filter title="请选择" style="flex:1">
            <zw-filter-item bind:change="changeFilter" value="1" text="北京"></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="2" text="上海"></zw-filter-item>
        </zw-filter>
        <zw-filter title="请选择" style="flex:1">
            <zw-filter-item bind:change="changeFilter" value="1" text="北京"></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="2" text="上海"></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="3" text="深圳" selected></zw-filter-item>
        </zw-filter>
        <zw-filter title="请选择" style="flex:1">
            <zw-filter-item bind:change="changeFilter" value="1" text="北京"></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="2" text="上海" selected></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="3" text="深圳"></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="4" text="辽宁"></zw-filter-item>
            <zw-filter-item bind:change="changeFilter" value="5" text="山东"></zw-filter-item>
        </zw-filter>
        <zw-filter title="请选择" style="flex:1">
            <block s-for="list" s-for-index="index" s-for-item="item">
                <zw-filter-item bind:change="changeFilter" value="{{item.value}}" text="{{item.text}}" selected="{{item.selected}}"></zw-filter-item>
            </block>
        </zw-filter>
    </view>
```
js:
```
/* eslint-disable babel/new-cap */
Page({
/* eslint-enable babel/new-cap */
    data: {
        list: [
            {
                value: 1,
                text: '北京'
            },
            {
                value: 2,
                text: '上海'
            },
            {
                value: 3,
                selected: true,
                text: '深圳'
            },
            {
                value: 4,
                text: '辽宁'
            },
            {
                value: 5,
                text: '山东'
            },
            {
                value: 6,
                text: '济南'
            },
        ]
    },
    changeFilter(e) {
        console.log(e, '事件')
    }
});
```