图片轮播问题

来源：4-4 轮播图组件实现（上)

Han

2018-05-24

export default {

name: 'Slider',

data () {

return {

sliderItem: [],

loop: true,

}

mounted () {

setTimeout(() => {

this.initScrollClass()

this.initScrollWidth()

this.initSlider()

}, 20)

methods: {

initScrollWidth () {

let sliderWidth = this.$refs.sliderWrap.clientWidth

let scrollWidth = sliderWidth * this.sliderItem.length

if (this.loop) {

scrollWidth += sliderWidth * 2

}

this.$refs.sliderGroup.style.width = scrollWidth + 'px'

initScrollClass () {

this.sliderItem = this.$refs.sliderGroup.children

for (let item of this.sliderItem) {

addClass(item, 'slider-item')

}

console.log(this.sliderItem.length)

initSlider () {

this.slider = new BScroll(this.$refs.sliderWrap, {

scrollX: true,

scrollY: false,

momentum: false,

snap: {

threshold: 0.3,

speed: 400,

loop: this.loop,

}

})

}

mounted后第一次片手动滚动图片时有种卡顿的感觉，没有任何过渡就到了第二张。长按时会出现bug：

//img.mukewang.com/szimg/5b06638b0001455818970085.jpg

//img.mukewang.com/szimg/5b066e550001a72105630275.jpg

说这个page[0]是undefined

好像是点了一下才能初始化BScroll，才能正常使用

写回答

1回答

ustbhuangyi

2018-05-24

建议去对比我的源码，注意 CSS 部分的书写

Han

setTimeout(() => { this.initScrollClass() this.initScrollWidth() this.initSlider() }, 20) setTimeout(() => { this.slider.refresh() }, 20) 在mounted里添加了20毫秒延迟后refresh就可以解决问题了，这是什么原因？如果写成这样： setTimeout(() => { this.initScrollClass() this.initScrollWidth() this.initSlider() this.refresh() }, 20) 也不能解决问题。一定是要把refresh分开写在下面才行

2018-05-24

共1条回复

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

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

5432 学习 · 3804 问题

查看课程

相似问题

轮播图

回答 1

轮播图的问题

回答 2

关于轮播图中slider-item为什么是7个，多clone两个的问题

回答 1

图片轮播周围元素也受到滑动影响

回答 1

轮播图接口

回答 2

打开慕课网App查看更多内容