1.0.0 • Published 8 years ago

zui-swipe v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

ZUI-Swipe

基于 Vueswipe 组件,依赖vue-touch

Usage

1. 安装:npm install zui-swipe
2. 项目使用: 
import VueTouch from 'vue-touch';
import Swipe from 'zui-swipe';
Vue.use(VueTouch); 
new Vue({
    el: '#app',
    components: {
        'zz-swipe': Swipe
    },
    data: function(){
        return {    
            imgs: [
                'http://pic1.58cdn.com.cn/1.png', 
                'http://pic1.58cdn.com.cn/2.xpng',
                'http://pic1.58cdn.com.cn/3.png'
                ]
        }
    },
    template: '<div><zz-swipe :imgs="imgs" height="13rem"></zz-swipe></div>'
});

##Config(props)

NameTypeDefaultDescription
imgsArray[]图片url,单张图片不建议使用本组件
autoNumber0设置自动轮播interval时间,<=0不启用自动轮播
disableCustomBooleanfalse是否禁用手动轮播
durationNumber600轮播滑动过程耗时,毫秒
heightString8rem轮播框高度,需带上单位
showIndicatorsBooleantrue是否显示底部小圆点
indicatorsColorString#dbd8d8圆点默认颜色
indicatorsActiveColorString#ffffff正在展示的图片对应圆点的颜色
indicatorsPositionString0.53rem圆点位置(离图片底部距离)
indicatorsSizeString0.53rem圆点尺寸(直径)
indicatorsSpacingString0.53rem圆点之间的距离
showWholeImgBooleanfalsefalse默认图片居中显示;true图片长宽设为100%,显示全图,但图片变形,不建议使用