美文网首页
基于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()函数里

相关文章

  • 轮播组件——基于原生 && Vue

    基于 better-scroll 的轮播图组件 在做移动端轮播图的时候,本想沿用之前 PC 端的轮播图,后来发现并...

  • Vue.js制作移动端音乐播放器项目心得

    使用better-scroll制作轮播图组件 使用better-scroll实现一个可以上下拖动的组件 组件代码如...

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

    在前面已经完成了最基本的slider的创建,下面将为slider添加autoPlay功能 该函数实现的功能为清除上...

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

    轮播图组件是前端开发中,很重要的一个组件,下面我将讲述我的轮播图(下面将以slider称呼)组件开发(黄轶大神讲的...

  • ReactJS-轮播图

    做一个基于ReactJS的轮播图组件 使用

  • 通用的轮播图组件

    在开发过程中,经常会用到轮播图,那就有必要准备一个通用的轮播图组件,我是借助swiper插件的,下面是轮播图组件 ...

  • 微信小程序轮播图

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单...

  • MUI组件(4)

    slide(轮播组件) 轮播组件是MUI提供的核心组件之一,基于轮播组件衍生出了图片轮播、可拖动式图文表格、可拖动...

  • 轮播图组件开发

    在base/slider文件夹下创建slider.vue文件并在recommend.vue文件中引入 slider...

  • Slider - 轮播图

    简介: 用react开发的轮播图组件,支持淡入淡出、水平滚动、垂直滚动的无缝轮播效果。可自定义轮播内容。 API ...

网友评论

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

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