vue-music项目中slider组件不能轮播等问题

在看慕课网的vue.js高级课程音乐app时,发现由于vue-cli已由2变为3,better-scroll也因为版本更新的原因,如果照着源代码,会出现很多小问题

1.框架搭建

搭项目框架时,因为vue-cli3如果自己选择了babel,stylus等,最后都是会构建好的,所以不需要跟着教学视频再安装相关loader或插件。

一定要根据自己的情况,视情况而定,不要盲目跟着老师安装东西

2.写slider组件时发现出现很多的小问题,比如不能轮播,currentPageIndex值不对,后来发现因为版本的更新很多小细节进行了修改

如:loop的初始化,轮询时pageIndex不需要+1,this.slider.goToPage()可以用this.slider.next()代替,click: false时,a标签反倒不能跳转等

以下为相关代码:

    _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'
            },
            _initDots() {
                this.dots = new Array(this.children.length)
            },
            _initSlider() {
                this.slider = new BScroll(this.$refs.slider, {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: {
                        loop: this.loop,
                        threshold: 0.3
                    },
                    click: true
                })
                this.slider.on('scrollEnd', () => {
                    let pageIndex = this.slider.getCurrentPage().pageX
                    this.currentPageIndex = pageIndex

                    if(this.autoPlay) {
                        clearTimeout(this.timer)
                        this._play()
                    }
                })
            },
            _play() {
                this.timer = setTimeout(()=> {
                    this.slider.next();
                }, this.interval)
            }

  

猜你喜欢

转载自www.cnblogs.com/Anne3/p/11207234.html