Vue-smooth-touch-slide NPM

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'
    }
]