关于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 源码相关部分喔~

0
0

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程