Neurotic Pumpkin Murderer

    vue-smooth-touch-slide

    2.0.3 • Public • Published

    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

    Install

    npm i vue-smooth-touch-slide

    DownloadsWeekly Downloads

    7

    Version

    2.0.3

    License

    ISC

    Last publish

    Collaborators

    • caozhaoliang