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的部分,改成和他一样的就好了,我之前也遇到了这样的问题

1
1
wong_巴卫
我也遇到这个问题,解决了谢谢。
2017-09-23
共1条回复

ustbhuangyi

2017-09-05

是不是 better-scroll 版本是最新的,建议去看最新 master 的代码

1
5
ustbhuangyi
回复
慕桂英619108
你有没有看音乐课程主干最新代码
2017-09-07
共5条回复

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

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

5432 学习 · 3804 问题

查看课程