hv-scroll

1. 使用姿势

####1.1 template

<div id="container">
  <div class="slider-item">
    <div class="item">1</div>
  </div>
  <div class="slider-item">
    <div class="item">2</div>
  </div>
  <div class="slider-item">
    <div class="item">3</div>
  </div>
</div>

1.2 javascript

const container = document.querySelector('#container')

const vHScroll = new window.HVScroll(container, {
  afterInitialize: function() {
    container.style.visibility = 'visible'
  }
})

2. 通过npm引入

####2.1 安装hv-scroll

$ npm install hv-scroll

####2.2 引入hv-scroll

$ import HVScroll from 'hv-scroll'

3. Demo

####3.1 下载项目源码 源码基于webpack构建

$ git clone https://github.com/xiuhonglee/hv-scroll.git

####3.2 安装依赖

$ cd hv-scroll
$ npm install 

####3.3 测试Demo页

$ npm run dev

####3.4 浏览器打开

localhost:9090

4. Options参数

opitons list (第一个为默认值)

4.1 属性值

• pageClass: [ className ] slider元素类名，上例为slider-item
• direction: [ 'horizontal' | 'vertical' ] 滚动方向，默认：horizontal
• minDragDistance: [ 40 ] 切换轮播的最小滚动距离，单位px，默认40
• itemsInPage: [ 1 ] 对slider进行分割，默认为1，表示不分割
• moveStep: [ 'page' | 'slider' ] 当itemsInPage > 1时，该值设为slider，轮播将按照窗格进行滚动
• page: [ 1 ] 初始化显示页数，起始值为1
• duration: [ 300 ] 动画时长，单位: ms

4.2 方法

供外部调用接口

const vHScroll = new window.HVScroll(container, {
  afterInitialize: function() {
    container.style.visibility = 'visible' // 必要！
  },

  // 滑动slider时的调用顺序: onDragStart -> onDrag -> onSwipeStart -> onDragEnd -> onSwipeEnd

  onSwipeStart: function(container, activeElement, currentPageIndex, direction) {
    // 1. container: 容器DOM
    // 2. acttiveElement: 当前活动元素（最左/上的那个slider元素）
    // 3. currentPageIndex: 当前slider索引值
    // 4. direction: 滑动方向（left | right | top | bottom）
  },

  onSwipeEnd: function(container, activeElement, currentPage, direction) {
    // 参数onSwipeStart
  },

  onDragStart: function(event) {
    // event: 事件对象
  },
  onDrag: function (activeElement, parsedEvent, overscroll, event) {
    // 1. activeElement: 当前活动元素（最左/上的那个slider元素）
    // 2. parsedEvent: {
    //      direction: 'left | right | top | bottom',
    //      distanceX: Number,
    //      distanceY: Number
    //    }
    // 3. overscroll: Boolean，是否越界; 比如：是否滑动最左侧
    // 4. event: 事件对象
  },
  onDragEnd: function (container, activeElement, currentPageIndex, direction) {
    // 参数onSwipeStart
  }
})