0.0.1 • Published 7 years ago
dj-swiper v0.0.1
安装组件
npm i dj-swiper -S
代码中引用组件
import DjSwiper from 'dj-swiper/index.vue';
然后像使用自己定义的vue组件一样使用
<template>
<div id="app">
...
<dj-swiper></dj-swiper>
...
</div>
</template>
...
components: {
DjLoading
}
...
参数
props:
uploadSwiper: false
default: true
是否加载 swiper.js 及 swiper.css 文件
bannerData:[{
img:'图片链接',
url:'图片跳转链接' //可不传
}]
默认传入的轮播图片数组,非必传
configInfo:{
direction: 'horizontal', // 滑动方向 垂直:vertical
speed: 2000, // 滑动的速度
autoplay: 2000, // 自动播放的时候间隔
loop: true, // 循环播放
pagination: null, 不用分页符
//默认'.swiper-pagination' 有分页符
height: '' // 设置容器的高,默认图片自适应
}
pagination: function (mySwiper, index, className) {
return '<li class="' + 'className' + '">' + '</li>'
}
自定义分页符函数,其中的className为自定义样式的class名称
可以自定义html元素名称
插槽 支持自定义轮播模块
<template :slot="'slideContent'">
<div class="swiper-slide">第一页</div>
<div class="swiper-slide">第二页</div>
</template>
插槽内每页内容需要加上class="swiper-slide"
0.0.1
7 years ago