vue-smooth-touch-slide

完全基于vue的单文件轮播组件。 解决了swiper.js在ios7 ipad和安卓微信等场景中滑动卡顿的情况。

*2.0更新文档

1.去除了对jade和stylus的依赖，只需要在vue中引入即可，不需要安装额外的包。

2.解决了旋屏后重绘(orientationchange)的BUG，现在旋屏后也可以正常显示了。

3.增加了对vue2.0的支持，同时保留vue1.0版本的支持，引入方式有所不同，详见Usage。

**2.0.3

更改了默认dot的大小，不会像巨无霸一样盘踞在右下角了。

dot宽高支持rem + dpr方案下的meta缩放，由于css的小点绘制无法使用rem(会不圆)，在data-dpr=1、2、3的情况下dot会以px单位自适应显示。

Installation

npm install vue-smooth-touch-slide --save

Usage Vue@1.0

<template>
    <slide :Slide="banners" :Millisec="5" :Width="'100%'" :Height="'3.125rem'" :Duration="300" :Dot="true" :Position="'right'"></slide>
</template>
 
<script>
    import Slide from 'vue-smooth-touch-slide/1.0/Slide.vue'
 
    export default {
        components: {
            Slide
        }
    }
</script>

Usage Vue@2.0

<template>
    <slide :Slide="banners" :Millisec="5" :Width="'100%'" :Height="'3.125rem'" :Duration="300" :Dot="true" :Position="'right'"></slide>
</template>
 
<script>
    import Slide from 'vue-smooth-touch-slide/2.0/Slide.vue'
 
    export default {
        components: {
            Slide
        }
    }
</script>

Props

Slide

type: Array

required: true

eg:

banners: [
    {
        img: 'http://www.caozhaoliang.com/1.jpg',
        link: 'http://www.caozhaoliang.com'
    },
    {
        img: 'http://www.caozhaoliang.com/2.jpg',
        link: 'http://www.caozhaoliang.com'
    },
    {
        img: 'http://www.caozhaoliang.com/3.jpg',
        link: 'http://www.caozhaoliang.com'
    }
]

Millisec

type: Number

default: 5

轮播时间间隔

Width

type: String

default: '100%'

轮播区域宽，默认100%，可以设置单位px、em、rem

Height

type: String

default: '200px'

轮播区域高，默认200px，可以设置单位px、em、rem

Duration

type: Number

default: 300

轮播动画时间,默认300ms

Dot

type: Boolean

default: true

轮播底部点显示控制，默认显示

Position

type: String

default: 'right'

轮播底部点显示位置，默认右下，目前仅支持右下和左下，左下请设置'left'

Tips

如果传入轮播数组长度为1，轮播不可滚动，底部点不显示，可跳转传入link

License

MIT