轮播自动播放时,是否可以直接使用setInterval去实现?

来源:4-6 轮播图组件实现(下)

asing1elife

2017-11-23

// 自动播放
_play () {
  // 设置一个定时器,间隔为轮播组件属性中的间隔值
  setInterval(() => {
    // 获取当前页的index,改方法由better-scroll提供
    let pageIndex = this.slider.getCurrentPage().pageX

    // 判断是否处于循环模式中
    if (this.loop) {
      // 在循环模式中,会在左右多生成一对轮播,所以表象的pageIndex需要+1
      pageIndex += 1
    }

    // 将计算后的pageIndex回传到slider的方法中,该方法又better-scroll提供
    // 第一个值为横向索引,即当前页面索引
    // 第二个值为纵向索引,因为该轮播不支持纵向滚动,所以为0
    // 第三个值为滚动速度,设为当前间隔的1/10即可
    this.slider.goToPage(pageIndex, 0, this.interval / 10)
  }, this.interval)
}


写回答

1回答

ustbhuangyi

2017-11-23

不可以用 setInterval,它的逻辑是在滚动到某一页以后,再去延时滚动到下一页

0
1
asing1elife
非常感谢!
2017-11-24
共1条回复

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3805 问题

查看课程