用better-scroll做輪播圖,不能無縫迴圈
阿新 • • 發佈:2019-02-07
現象:
- 可以輪播,但不能迴圈(不能從第一張往前翻,不能從最後一張往後翻)
- 按教程裡給slider-group增加了2個slider的寬度,但他們出現在輪播圖片的末尾(2個空白)
- 第一張圖沒有對應dot,第二張圖對應第一個dot,以此類推
還有一些小修改,可能是個人原因,也可能是版本差異,貼出來給大家一下:this.slider = new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, // 慣性 snap: { loop: this.loop, // 迴圈 threshold: 0.3, speed: 400 // 輪播間隔 }, click: true })
- 降版本後dots會多兩個:
_initDots() { // this.dots = new Array(this.children.length) // 原寫法 this.dots = new Array(this.children.length - 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