<template>
<div class="slides-lite slides-container" :id="slideId">
<div class='slides-wrapper'>
<slot></slot>
</div>
<!-- Add Pagination -->
<div v-if="pagination && swiper && swiper.slides && swiper.slides.length>0"
:class="{'swiper-pagination':pagination}"
class="swiper-pagination-bullets">
<span class="swiper-pagination-bullet" v-for="(item,index) in swiper.slides"
:class="{'swiper-pagination-bullet-active':swiper.activeIndex === index}"></span>
</div>
</div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
/**
* @component SlidesLite
* @description
*
* ## 轮播组件 / 精简版Slides组件
*
* 参考的项目源自`swipe-js-iso`, 详情转向下方链接, 此外 为了保证和Slide组件接口的一致性, 将同操作和同属性的接口改成和Slides一致的名称
*
*
* ### 对照表
*
当前属性 / Props | 原始名称 / Original | 类型 / type | 默认值 / Default | 描述 / Description
------------------------------|------------------------------|------------|---------------|-------------------------------------------------------------------------------------------
initialSlide | startSlide | Number | 0 | index position Swipe should start at
speed | speed | Number | 300 | speed of prev and next transitions in milliseconds.
autoplay | auto | Number | - | begin with auto slideshow (time in milliseconds between slides)
loop | continuous | Boolean | true | create an infinite feel with no endpoints
- | disableScroll | Boolean | false | stop any touches on this container from scrolling the page(点击拖动轮播是否能滚动页面,pc上可以,移动端不起作用)
touchMoveStopPropagation | stopPropagation | Boolean | false | stop event propagation
pagination | - | String | '' | 只能是'.swiper-pagination'
*
*
当前事件 / Event | 原始名称 / Original | 类型 / type | 默认值 / Default | 描述 / Description
----------------------------- | ---------------------------- | ---------- | ------- | -----------------------------------------------------------------------------------------
onProgress(swiper, progress) | swiping(progress) | Function | noop | invoked while swiping with the percentage (0-1) of the full width that has been swiped.
onSlideChangeEnd(swiper) | callback(index, elem) | Function | noop | runs at slide change(改变即触发).
onTransitionEnd(swiper) | transitionEnd(index, elem) | Function | noop | sruns at the end slide transition(改变并且动画完毕后触发, 实际比callback晚点).
*
*
实例方法 / Methods | 原始名称 / Original | 描述 / Description
---------------------------------------|------------------------|-----------------------------------------------------------------------------
slidePrev(runCallbacks, speed) | prev() | slide to prev
slideNext(runCallbacks, speed) | next() | slide to next
mySwiper.activeIndex | getPos() | returns current slide index position(返回当前的index)
mySwiper.slides.length | getNumSlides() | returns the total amount of slides(返回轮播子页面的个数)
slideTo(index, duration, runCallbacks) | slide(index, duration) | slide to set index position (duration: speed of transition in milliseconds)
stopAutoplay() | stop() | 停止自动滚动
destroy() | kill() | 移除销毁
*
*
* @demo #/slides-lite
* @see https://github.com/voronianski/swipe-js-iso
* */
import Swipe from 'swipe-js-iso'
export default {
name: 'SlidesLite',
provide () {
const _this = this
return {
slidesLiteComponent: _this
}
},
props: {
pagination: String, // 指示器的class, 且只支持'.swiper-pagination'
initialSlide: {type: Number, default: 0}, // 初始的index
speed: {type: Number, default: 400}, // 速度
autoplay: {type: Number, default: 0}, // 自动播放时间
loop: {type: Boolean, default: false}, // 循环
touchMoveStopPropagation: {type: Boolean, default: false} // 是否冒泡
},
data () {
return {
init: false, // 是否初始化
timer: null, // 初始化的计时器
swipe: null, // swipe-js-iso 实例
swiper: null // 模拟 Swiper 接口的部分
}
},
computed: {
slideId () {
return 'slidesLite-' + this._uid
}
},
methods: {
initSlides () {
const _this = this
this.timer && window.clearTimeout(this.timer)
this.timer = window.setTimeout(() => {
if (!this.init) {
this.swipe = new Swipe(this.$el, {
startSlide: this.initialSlide,
speed: this.speed,
auto: this.autoplay,
continuous: this.loop,
disableScroll: false,
stopPropagation: this.touchMoveStopPropagation,
swiping (progress) {
_this.$emit('onProgress', _this.swiper, progress)
},
callback (index) {
_this.swiper.activeIndex = index
_this.$emit('onSlideChangeEnd', _this.swiper)
},
transitionEnd (index) {
_this.swiper.activeIndex = index
_this.$emit('onTransitionEnd', _this.swiper)
}
})
this.swiper = {
activeIndex: _this.initialSlide,
slides: (() => { return _this.$children })(),
slidePrev () {
_this.swipe.prev()
},
slideNext () {
_this.swipe.next()
},
slideTo (index, duration) {
_this.swipe.slide(index, duration)
},
update () {
_this.$nextTick(() => {
_this.swiper.slides = _this.$children
_this.swipe.setup()
})
},
stopAutoplay () {
_this.swipe.stop()
},
destroy () {
_this.swipe.kill()
}
}
this.init = true
} else {
this.swiper.update()
}
}, 0)
}
},
destroyed () {
this.swiper && this.swiper.destroy()
}
}
</script>