关于better-scroll垂直方向轮播图功能添加

关于better-scroll垂直方向轮播图功能添加

打开源码snap.js 添加几行代码就搞定

• 开启loop、初始化为第一张图

this.goToPage(this.currentPage.pageX ||
this.hasHorizontalScroll ? initPage : 0, 
this.currentPage.pageY || this.hasVerticalScroll ? 
initPage : 0, 0)
复制代码

• 实时监听轮播图滚动到第几张、进行切换

this.on('scrollEnd', () => {
      if (snap.loop && this.hasHorizontalScroll) {
        if (this.currentPage.pageX === 0) {
          this.goToPage(this.pages.length - 2, this.currentPage.pageY, 0)
        }
        if (this.currentPage.pageX === this.pages.length - 1) {
          this.goToPage(1, this.currentPage.pageY, 0)
        }
      } else if (snap.loop && this.hasVerticalScroll) {
        if (this.currentPage.pageY === 0) {
          this.goToPage(this.currentPage.pageX, this.pages[0].length - 2, 0)
        }
        if (this.currentPage.pageY === this.pages[0].length - 1) {
          this.goToPage(this.currentPage.pageX, 1, 0)
        }
      }
    })
复制代码

有个疑问，就是这个轮播图是基于translationEnd这个事件，PC端貌似这个兼容性只能兼容到IE10、手机端应该没什么问题

转载于:https://juejin.im/post/5a58d3da5188257327398ca5