Vue uses better-scroll to achieve seamless carousel

Recently, I was learning Vue, and I found a project to learn Vue to build a music app. When I used better-scroll to write a seamless carousel map, I stepped on a big pit and searched for a long time to find the problem. . . . .

1, if the version of better-scroll is "better-scroll": "^0.1.15" , that is, the lower version
The configuration for BScroll is as follows
 new BScroll(this.$refs.slider, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          snap: true,
          snapLoop: this.loop,
          snapThreshold: 0.3,
          snapSpeed: 400
        })
Write this .slider.goToPage(pageIndex, 0, 400 ) in the autoplay method

The complete code is as follows

 _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. If the version of better-scroll is a new version, "better-scroll": "^1.10.2" ,
The configuration of BScroll is as follows
new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        },
        click: true 
      }); that is, the snap should be written in the form of an object, and the configuration in autoplay should replace goToPage(pageIndex, 0, 400 ) with next() and change the 
  if ( this .loop) { in scrollEnd
            pageIndex -= 1
          }
Remove it to prevent the small dots from not matching the picture
The complete code is as follows

 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);
    }

This is the first time to write a blog garden. There are many things that are not well written. I hope you can correct me and learn together.