recommend页轮播图设置loop=true失效
来源:4-5 轮播图组件实现(中)
慕桂英619108
2017-09-05
slider.vue中的部分代码
props: {
loop: {
type: Boolean,
default: true
},
autoPlay: {
type: Boolean,
default: false
},
interval: {
type: Number,
default: 1000
}
},
methods中的部分代码
_setSliderWidth (isResize) {
this.children = this.$refs.sliderGroup.children
let width = 0
let sliderWidth = this.$refs.slider.clientWidth
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'
console.log('图片个数:' + (width / sliderWidth))
},
_initSlider () {
this.slider = new BScroll(this.$refs.slider, {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapLoop: this.loop,
snapThreshold: 0.3,
snapSpeed: 400
})
感觉都对就是轮播到最后一张时没图片了,而且无法循环播,好郁闷呀,老师拜托了写回答
2回答
-
尘埃与流浪3498920
2017-09-14
better-scroll新的版本貌似实例化里的参数书写规则不太一样,snap作为一个对象,里面包裹loop,speed等,你去老师的github看一下源码实例化better-scroll的部分,改成和他一样的就好了,我之前也遇到了这样的问题
112017-09-23 -
ustbhuangyi
2017-09-05
是不是 better-scroll 版本是最新的,建议去看最新 master 的代码
152017-09-07
相似问题