当图片轮播到最后一张时，不能自动跳回第一张，卡住在最后一张，而且scrollEnd不再触发，但是手动切换，又能继续自动轮播，但是一旦轮播到最后一张还是会卡住
来源：4-6 轮播图组件实现（下）
Hyman928
2018-01-28
export default {
data () {
return {
dots: [],
currentPageIndex: 0
}
},
props: {
loop: {
type: Boolean,
default: true
},
autoPlay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 400
}
},
mounted () {
setTimeout(() => {
this._setSliderWidth()
this._initDots()
this._initSlider()
if (this.autoPlay) {
this._play()
}
}, 20)
window.addEventListener('resize', () => {
if (!this.slider) {
return
}
this._setSliderWidth(true)
this.slider.refresh()
})
},
destoryed () {
clearTimeout(this.timer)
},
methods: {
_setSliderWidth (isResize) {
let width = 0
let sliderWidth = this.$refs.slider.clientWidth
this.children = this.$refs.sliderGroup.children
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i]
addClass(child, 'slider-item')
child.style.width = sliderWidth + 'px'
width += sliderWidth
}
if (this.loop && !isResize) {
width += 2 * sliderWidth
}
this.$refs.sliderGroup.style.width = width + 'px'
},
_initSlider () {
this.slider = new BScroll(this.$refs.slider, {
scrollX: true,
scrollY: false,
momentum: false,
snap: {
loop: this.loop,
threshold: 0.3,
speed: 400
}
})
this.slider.on('scrollEnd', () => {
this.currentPageIndex = this.slider.getCurrentPage().pageX
if (this.autoPlay) {
clearTimeout(this.timer)
this._play()
}
})
},
_initDots () {
this.dots = new Array(this.children.length)
},
_play () {
let pageIndex = this.currentPageIndex + 1
this.timer = setTimeout(() => {
this.slider.goToPage(pageIndex, 0, 400)
}, this.interval)
}
}
}
1回答
-
ustbhuangyi
2018-01-28
建议和我主干的代码做对比，另外确保你的 better-scroll 用的最新版
062018-11-05
相似问题