关于scroll-better的问题
来源:4-4 轮播图组件实现(上)
慕无忌5538562
2019-02-13
老师,您好,轮播图已经可以轮播了,但是宽度有些问题,会少两个div的宽度,只有在改变视图大小的情况下,宽度才正常。请问是哪里少了什么吗?
import { addClass } from 'common/js/dom’
import BScroll from 'better-scroll’
export default {
props: {
loop: {
type: Boolean,
dafault: true
},
autoPlay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 500
}
},
data() {
return {
dots: [],
currentPageIndex: 0
}
},
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()
})
},
methods: {
_setSliderWidth(isResize) {
this.children = this.refs.sliderGroup.childrenletwidth=0letsliderWidth=this.refs.sliderGroup.children let width = 0 let sliderWidth = this.refs.sliderGroup.childrenletwidth=0letsliderWidth=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.KaTeX parse error: Expected 'EOF', got '}' at position 53: …+ 'px' }̲ }, …refs.slider, {
scrollX: true,
scrollY: false,
momentum: false,
snap: {
loop: true,
threshold: 0.3,
snapLoop: this.loop,
speed: 400
}
})
this.slider.on(‘scrollEnd’, () => {
let pageIndex = this.slider.getCurrentPage().pageX
this.currentPageIndex = pageIndex
console.log(pageIndex)
if (this.autoPlay) {
clearTimeout(this.timer)
this._play()
}
})
},
_play() {
this.timer = setTimeout(() => {
this.slider.next()
}, this.interval)
}
}
}
1回答
-
ustbhuangyi
2019-02-14
从截图上看应该是你的 CSS 样式部分有问题,建议去对比一下我的 GitHub 源码相关部分喔~
00
相似问题