props: {
loop: {
type: Boolean,
default: true
},
autoPlay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 4000
}
},
mounted () {
setTimeout(() => {
this._setwarrperWidth()
this._initSlider()
}, 20)
},
methods: {
_setwarrperWidth () {
this.children = this.$refs.sliderGroup.children
let width = 0
let WarrperWidth = this.$refs.slider.clientWidth
console.log(WarrperWidth)
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i]
addClass(child, 'warrper-img')
child.style.width = WarrperWidth + 'px'
width += WarrperWidth
console.log(width)
console.log(this.loop)
}
if (this.loop) {
width += 2 * WarrperWidth
}
this.$refs.sliderGroup.style.width = width + 'px'
},
_initSlider () {
this.slider = new BScroll(this.$refs.slider, {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapLoop: this.loop,
snapThreshold: 0.3,
snapSpeed: 400,
click: true
})
}