## Swipe

> New in 1.5.0+

The Swipe component, which provides a WeChat list left slip function, makes it easy to do some functional operations on the list items.

### Example

`Swipe` demo code is [here](https://github.com/didi/cube-ui/tree/master/example/pages/swipe)

- Basic Usage

The common scenario of `Swipe` component is to match `Scroll` components. It can not only scroll vertically, but also slide out some buttons to do list items. Of course, `Swipe` components can also be used separately.

```html
<template>
 <div class="swipe-wrapper">
    <cube-scroll>
      <cube-swipe
          @item-click="onItemClick"
          @btn-click="onBtnClick"
          :data="swipeData">
      </cube-swipe>
    </cube-scroll>
  </div>
</template>
```

```js
export default {
  data() {
    return {
      swipeData: [{
        item: {
          text: '测试1',
          value: 1
        },
        btns: [
          {
            action: 'clear',
            text: '不再关注',
            color: '#c8c7cd'
          },
          {
            action: 'delete',
            text: '删除',
            color: '#ff3a32'
          }
        ]
      }, {
        item: {
          text: '测试2',
          value: 2
        },
        btns: [
          {
            action: 'clear',
            text: '不再关注',
            color: '#c8c7cd'
          },
          {
            action: 'delete',
            text: '删除',
            color: '#ff3a32'
          }
        ]
      }, {
        item: {
          text: '测试3',
          value: 3
        },
        btns: [
          {
            action: 'clear',
            text: '不再关注',
            color: '#c8c7cd'
          },
          {
            action: 'delete',
            text: '删除',
            color: '#ff3a32'
          }
        ]
      }]
    }
  },
  methods: {
    onItemClick(item) {
      console.log('click item:', item)
    },
    onBtnClick(btn, index) {
      if (btn.action === 'delete') {
        this.$createActionSheet({
          title: '确认要删除吗',
          active: 0,
          data: [
            {content: '删除'}
          ],
          onSelect: () => {
            this.swipeData.splice(index, 1)
          }
        }).show()
      }
    }
  }
}
```
If the `Swipe` component uses a default slot, you need to pass the data structure shown in the example.

- Custom slots

In fact, our more common requirement is the need for a display of the content of a custom list, so the `Swipe` component also supports the use of slots, as follows:

```html
<template>
  <div class="swipe-wrapper">
    <cube-scroll>
      <cube-swipe>
        <transition-group name="swipe" tag="ul">
          <li class="swipe-item-wrapper" v-for="(data,index) in swipeData" :key="data.item.id">
            <cube-swipe-item
                ref="swipeItem"
                :btns="data.btns"
                :index="index"
                @btn-click="onBtnClick"
                @active="onItemActive">
              <div @click="onItemClick(data.item, index)" class="item-inner">
                <div class="icon">
                  <img width="60" height="60" :src="data.item.imgurl">
                </div>
                <div class="text">
                  <h2 class="item-name" v-html="data.item.name"></h2>
                  <p class="item-desc" v-html="data.item.desc"></p>
                </div>
              </div>
            </cube-swipe-item>
          </li>
        </transition-group>
      </cube-swipe>
    </cube-scroll>
  </div>
</template>
```

```js
export default {
  data() {
    return {
      swipeData: [
        {
          item: {
            id: '3646653877',
            name: '还不是因为你长得不好看',
            desc: '伤感：歌词再狠，也抵不过现实伤人',
            imgurl: 'http://p.qpic.cn/music_cover/MhQ4bJBPt3Yt5icXyBGNhyPJnE9O51CqaN72iaDgvFmDKaia12UFhU5uQ/600?n=1'
          },
          btns: [
            {
              action: 'clear',
              text: '不再关注',
              color: '#c8c7cd'
            },
            {
              action: 'delete',
              text: '删除',
              color: '#ff3a32'
            }
          ]
        },
        {
          item: {
            id: '1789676645',
            name: '秋水浮萍任飘渺',
            desc: '『武侠配乐』快意恩仇江湖情',
            imgurl: 'http://p.qpic.cn/music_cover/8KfvDey9cibtZ5xkWxRic6vhXgdPic3wnB7reibI4pdPQBCP8u57uqcjsQ/600?n=1'
          },
          btns: [
            {
              action: 'clear',
              text: '不再关注',
              color: '#c8c7cd'
            },
            {
              action: 'delete',
              text: '删除',
              color: '#ff3a32'
            }
          ]
        },
        {
          item: {
            id: '3649034125',
            name: '念葳蕊',
            desc: '江海迦：热恋后哼一首歌为自己悲悯的歌',
            imgurl: 'http://p.qpic.cn/music_cover/jXFicBvicUcfIWSoCNT1OrbAoHG2fqqnrJVnGV4iaLCapWUpCKqbmAicJg/600?n=1'
          },
          btns: [
            {
              action: 'clear',
              text: '不再关注',
              color: '#c8c7cd'
            },
            {
              action: 'delete',
              text: '删除',
              color: '#ff3a32'
            }
          ]
        },
      ]
    }
  },
  created() {
    this.activeIndex = -1
  },
  methods: {
    onItemClick(item) {
      console.log('click item:', item)
    },
    onBtnClick(btn, index) {
      if (btn.action === 'delete') {
        this.$createActionSheet({
          title: '确认要删除吗',
          active: 0,
          data: [
            {content: '删除'}
          ],
          onSelect: () => {
            this.swipeData.splice(index, 1)
          }
        }).show()
      } else {
        this.$refs.swipeItem[index].shrink()
      }
    },
    onItemActive(index) {
      if (index === this.activeIndex) {
        return
      }
      if (this.activeIndex !== -1) {
        const activeItem = this.$refs.swipeItem[this.activeIndex]
        activeItem.shrink()
      }
      this.activeIndex = index
    }
  }
}
```

The default slot can be used with the `cube-swipe-item` component to realize the loop of the list. A custom slot is very flexible, but it also need to manually write some logic, for example if you want to customize the list when deleted animation, need to use `transition-group` to manage each need to manually activate the `swipe-item` contraction, as shown in the example code.

### Props configuration

- `cube-swipe` configuration

| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| data | For `swipe` list rendered data, when you need to use the built-in default slot, this parameter will be passed. Every item in the array is an Object type, including `item` and `btns`. These two parameters are described in `cube-swipe-item`. If a custom slot is used, this value may not be passed.  | Array | - | [] |
| autoShrink | Decide whether to automatically shrink the slider when the button is clicked, If you use a custom slot, you can pass this value directly to the `cube-swipe-item`. | Boolean | - | false |

- `cube-swipe-item` 配置

| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| item | Data for `swipe-item` list item rendering, when you need to use the built-in default slot, this parameter must be transmitted, and there are 2 fields, `value` and `text`, representing the value of the data item and the displayed copy respectively, but if you use custom slot, you can not pass this value. | Object | - | {} |
| btns | For `swipe-item` list item rendering button array, each item of the array is a Object type. It contains at least 2 fields, `text` and `color`, which represent the copy and color of the button respectively. | Array | - | [] |
| index | The index value of the current `swpie-item` in the entire list, must be passed. | Number | - | -1
| autoShrink | Decide whether to automatically shrink the slider when the button is clicked. | Boolean | - | false

### Events

- `cube-swipe` event

When you use a custom slot, you can listen directly to the events on the `cube-swipe-item`.

| Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 |
| - | - | - | - | - |
| item-click | Triggered when the list item is clicked | Clicked list item | The Index of the clicked list item in the list | - |
| btn-click | Triggered when the button is clicked | Clicked button | The index of the clicked button in the list | the list item<sup>1.9.7</sup> |

- `cube-swipe-item` event

| Event Name | Description | Parameters 1 | Parameters 2 |
| - | - | - | - |
| item-click | Triggered when the list item is clicked | Clicked list item | The Index of the clicked list item |
| btn-click | Triggered when the button is clicked | Clicked button | The index of the clicked button in the list |
| active | Triggered when you start sliding one of the list item | The index of the activation item in the list | - |

### Instance methods

- `cube-swipe-item` instance methods

| Method name | Description |
| - | - |
| shrink | Shrink the swipe item |

