vue使用better-scroll实现无缝轮播图

最近在学习vue,就找了一个项目学习vue构建音乐app,在使用better-scroll写无缝轮播图的时候踩到了一个大坑找了好久才找到问题所在。。。。。

1,如果better-scroll的版本是 "better-scroll": "^0.1.15"时,即低版本时
对于BScroll的配置如下 
 new BScroll(this.$refs.slider, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          snap: true,
          snapLoop: this.loop,
          snapThreshold: 0.3,
          snapSpeed: 400
        })
在自动播放的方法中写 this.slider.goToPage(pageIndex, 0, 400)

完整代码如下

 _initSlider() {
        this.slider = new BScroll(this.$refs.slider, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          snap: true,
          snapLoop: this.loop,
          snapThreshold: 0.3,
          snapSpeed: 400
        })

        this.slider.on('scrollEnd', () => {
          let pageIndex = this.slider.getCurrentPage().pageX
          if (this.loop) {
            pageIndex -= 1
          }
          this.currentPageIndex = pageIndex

          if (this.autoPlay) {
            this._play()
          }
        })

        this.slider.on('beforeScrollStart', () => {
          if (this.autoPlay) {
            clearTimeout(this.timer)
          }
        })
      },
     
      _play() {
        let pageIndex = this.currentPageIndex + 1
        if (this.loop) {
          pageIndex += 1
        }
        this.timer = setTimeout(() => {
          this.slider.goToPage(pageIndex, 0, 400)
        }, this.interval)
      }
2,如果better-scroll的版本是新版本的话  "better-scroll": "^1.10.2",
BScroll的配置如下
new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        },
        click: true
      });即snap要写成对象的形式,在自动播放中的配置要把goToPage(pageIndex, 0, 400)换成next()并且把scrollEnd中的 
 if (this.loop) {
            pageIndex -= 1
          }
去掉,防止小圆点和图片对不上
完整代码如下

 initSlider() {
      this.slider = new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        },
        click: true
      });
   
      this.slider.on("scrollEnd", () => {
        let pageIndex = this.slider.getCurrentPage().pageX;
        this.currentPageIndex = pageIndex;
        if (this.autoPlay) {
          clearTimeout(this.timer);
          this._Play();
        }
      });
    },

    _Play() {
      let pageIndex = this.currentPageIndex + 1;
      if (this.loop) {
        pageIndex += 1;
      }
      this.timer = setInterval(() => {
        this.slider.next()
      }, this.interval);
    }

第一次写博客园,有很多不会的写的不好的希望大家可以指正,共同学习

猜你喜欢

转载自www.cnblogs.com/chriswu/p/9007521.html