美文网首页
基于better-scroll的轮播图组件开发二

基于better-scroll的轮播图组件开发二

作者: buctor | 来源:发表于2019-05-15 16:35 被阅读0次

    在前面已经完成了最基本的slider的创建,下面将为slider添加autoPlay功能

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

    该函数实现的功能为清除上一个timer,然后在interval毫秒后,滚动到下一页操作

    但是,这样做只会执行一次,所以,需要在
    -滚动结束后: scrollEnd
    -手指离开: touchEnd
    后都需要执行这个函数,但是要判断aotuPlay是否为true
    而且在滚动开始之前,需要清除上一次的timer
    以scrollEnd为例子:

    this.slider.on('scrollEnd', () => {
        if(this.autoPlay){
            this._play()
        }
    })
    

    但是scrollEnd还需要考虑dot的改变,所以需要一个函数来封装scrollEnd后执行的操作

    滚动开始之前,为了防止滚动过程中突然autoplay所以需要一个函数清除timer

          this.slider.on('beforeScrollStart', () => {
            if (this.autoPlay) {
              clearTimeout(this.timer)
            }
          })
    

    注意,这些函数都放在_initSlider()函数里

    相关文章

      网友评论

          本文标题:基于better-scroll的轮播图组件开发二

          本文链接:https://www.haomeiwen.com/subject/bbtmaqtx.html