drip-ui/packages/swiper/zh-CN.md

Lightweight Mobile UI Components built on Vue

> list为图片列表快捷设置，如果你需要自定义一些样式，或者内容并不为纯图片，可以引用swiper-item组件来自定义。

```javaScript
    list 格式如下 
    [{
        url: '',
        img: '',
        title: ''
    }, {
        url: '',
        img: '',
        title: ''
    }]
```

##### 注意：

**在使用 swiper-item 而非 list 图片列表时，如果只有两项，将无法实现 loop 循环播放.**

```html
<demo-block :title="'自动轮播 循环播放'">
    <drip-swiper
        :list="list"
        height="120px"
        @on-index-change="getVal"
        loop
        auto>
    </drip-swiper>
    <p>通过on-index-change获取当前index</p>
    <p>current index: {{demo1Val}}</p>
</demo-block>

<demo-block :title="'aspect-ratio根据当前宽度计算高度 提示点位于中下方  v-model绑定index'">
    <drip-swiper
        :list="list"
        loop
        auto
        :aspect-ratio="300/1100"
        v-model="demo2Val"
        dots-position="center-down">
    </drip-swiper>
    <p>current index: {{demo2Val}}</p>
</demo-block>

<demo-block :title="'swiper-item'">
    <drip-swiper
        :aspect-ratio="300/1100"
        dots-position="center-down">
        <drip-swiper-item
            class="demo3"
            v-for="(item, index) in list"
            :key="index">
        <img :src="item.img">
        </drip-swiper-item>
    </drip-swiper>
</demo-block>

<demo-block :title="'垂直滚动'">
    <drip-swiper
        height="30px"
        auto
        loop
        direction="vertical"
        :interval=2000
        class="text-scroll"
        :show-dots="false">
        <drip-swiper-item
        v-for="(item, index) in list2"
        :key="index">
        <p v-text="item"></p>
        </drip-swiper-item>
    </drip-swiper>
</demo-block>
```

```javascript
data () {
    return {
        list: [{
        url: 'javascript:',
        img: 'http://alioss.sdbao.com/home/banner/banner.png',
        title: '111'
        }, {
        url: 'javascript:',
        img: 'http://alioss.sdbao.com/home/banner/banner2.png',
        title: '222'
        }, {
        url: 'javascript:',
        img: 'http://alioss.sdbao.com/home/banner/banner3.png',
        title: '333'
        }],
        list2: [
        '哈哈哈哈',
        '啦啦啦啦',
        '嘎嘎嘎嘎'
        ],
        demo1Val: 0,
        demo2Val: 1
    }
    },
    methods: {
    getVal (val) {
        this.demo1Val = val
    }
}
```

```css
.demo3 {
  img {
    width: 90%;
    margin: 0 auto;
    display: block;
  }
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  p {
    font-size: 24px;
    text-align: center;
    line-height: 30px;
  }
}
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| v-model| index绑定，使用v-model，一般不需要绑定 | `Number` | 0 |
| list | 图片列表 | `Array` | - |
| direction | 轮播方向 `horizontal`:左右轮播  `vertical`:上下轮播 | `String` | horizontal |
| show-dots | 是否显示提示点 | `Boolean` | true |
| show-desc-mask | 是否展示半透明遮罩 | `Boolean` | false |
| dots-position | 提示点位置 `left | center | right | left-down | right_down | center-down`前三个提示点在图片内部，后三个在图片下方 | `String` | right |
| dots-class | 提示点的className | `String` | - |
| auto | 是否自动轮播 | `Boolean` | false |
| loop | 是否循环轮播 | `Boolean` | false |
| interval | 轮播停留时长 | `Number` | 3000 |
| threshold | 滑动超出这个距离才开始滑动 | `Number` | 50 |
| duration | 切换动画时间 | `Number` | 300 |
| height | 高度值。如果为100%宽度并且知道宽高比，可以设置aspect-ratio自动计算高度 | `String` | '180px' |
| aspect-ratio | 用以根据当前可用宽度计算高度值 | `Number` | - |
| min-moving-distance | 超过这个距离才滑动 | `Number` | 0 |

### event

name | params | description
---|--- | --- | ---
on-index-change | currentIndex | 轮播 index 变化时触发