zui-swipe

1.0.0 • Public • Published

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)

Name Type Default Description
imgs Array [] 图片url,单张图片不建议使用本组件
auto Number 0 设置自动轮播interval时间,<=0不启用自动轮播
disableCustom Boolean false 是否禁用手动轮播
duration Number 600 轮播滑动过程耗时,毫秒
height String 8rem 轮播框高度,需带上单位
showIndicators Boolean true 是否显示底部小圆点
indicatorsColor String #dbd8d8 圆点默认颜色
indicatorsActiveColor String #ffffff 正在展示的图片对应圆点的颜色
indicatorsPosition String 0.53rem 圆点位置(离图片底部距离)
indicatorsSize String 0.53rem 圆点尺寸(直径)
indicatorsSpacing String 0.53rem 圆点之间的距离
showWholeImg Boolean false false默认图片居中显示;true图片长宽设为100%,显示全图,但图片变形,不建议使用

Readme

Keywords

Package Sidebar

Install

npm i zui-swipe

Weekly Downloads

0

Version

1.0.0

License

MIT

Last publish

Collaborators

  • xiaolee