1. 程式人生 > >用better-scroll做輪播圖,不能無縫迴圈

用better-scroll做輪播圖,不能無縫迴圈

現象:
  1. 可以輪播,但不能迴圈(不能從第一張往前翻,不能從最後一張往後翻)
  2. 按教程裡給slider-group增加了2個slider的寬度,但他們出現在輪播圖片的末尾(2個空白)
  3. 第一張圖沒有對應dot,第二張圖對應第一個dot,以此類推
後經網友分享,發現0.1.15中可以正常執行,原來是better-scoll版本的問題,在新版本中,輪播圖的bs物件需要這麼配置(snap寫在一個物件中):
      this.slider = new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false, // 慣性
        snap: {
          loop: this.loop, // 迴圈
          threshold: 0.3,
          speed: 400 // 輪播間隔
        },
        click: true
      })
還有一些小修改,可能是個人原因,也可能是版本差異,貼出來給大家一下:
  1. 降版本後dots會多兩個:
    _initDots() {
          // this.dots = new Array(this.children.length) // 原寫法
          this.dots = new Array(this.children.length - 2)
        },

  2. dot與圖片不對應:
      // bs物件配置方法中(配置後):
      this.slider.on('scrollEnd', () => {
            let pageIndex = this.slider.getCurrentPage().pageX
            // 老版本有,新版去掉:
            // if (this.loop) {
            //   pageIndex -= 1
            // }
            this.currentPageIndex = pageIndex
    
            if (this.autoPlay) {
              clearTimeout(this.timer)
              this._play()
            }
          })

    在下的專案和經驗都會上傳在github上,有幫助的請賞個star,Thanks♪(・ω・)ノ~github