# 图片滑动选择组件

## 实现方式

- 使用 van-popup、scrll-view 组件

## 使用说明

- onSelectItem 返回的 index === -1 代表为全部类型，`index === 999` 代表更多类型

| properties |    Event     |      类型 | 描述         |
| ---------- | :----------: | --------: | ------------ |
| data       | onSelectItem | AreaValue | 数据列表     |
| showMore   |      -       |         - | 是否显示更多 |

```HTML
 <free-scroll-image-tab data="{{data}}" showMore="{{false}}"></free-scroll-image-tab>
```

- 模板 `templates/tab-item` 数据说明

  - `imgUrl` 图片路径，使用 iconfont 时无需传递该数据，即 imgUrl 与 iconfont 传递一个即可
  - `label` tab 项文案
  - `className` tab 项类名
  - `index` tab 项索引
  - `selectIndex` 当前选中的 tab 项索引
  - `id` tab 项唯一 id
  - `iconfont`，值为一个对象，传递该数据时使用 iconfont，否则使用 image；对象属性为组件 iconfont 所需属性

  ```javascript
  Component({
    data: {
      mock1: {
        label: '全部',
        index: -1,
        iconfont: {
          name: 'all',
          size: 90,
          className: 'icon-all',
        },
      },

      mock2: {
        imgUrl: 'https://bennettfeely.com/clippy/pics/pittsburgh.jpg',
        label: '狐妖小媚娘',
        index: 1,
      },
    },
  });
  ```

  ```html
  <template is="tabItem" data="{{ ...mock1, id: 'tabItem1', selectIndex: -1 }}" />

  <template is="tabItem" data="{{ ...mock2, id: 'tabItem2', selectIndex: 1 }}" />
  ```

- ...