VUE iscroll

https://github.com/Dafrok/vue-iscroll-view
基本使用方法：

$ npm i vue-iscroll-view --save-dev
$ npm i iscroll --save-dev

import IScrollView from 'vue-iscroll-view'

/* Using these kinds of IScroll class for different cases. */
import IScroll from 'iscroll'
// import IScroll from 'iscroll/build/iscroll-infinite.js
// import IScroll from 'iscroll/build/iscroll-probe.js
// import IScroll from 'iscroll/build/iscroll-view.js
// import IScroll from 'iscroll/build/iscroll-zoom.js
// import IScroll from 'iscroll/build/iscroll-lite.js

Vue.use(IScrollView, IScroll)

<template>
  <iscroll-view class="scroll-view">
    Your contents
  </iscroll-view>
</tempalte>

<style>
.scroll-view {
  /* -- Attention: This line is extremely important in chrome 55+! -- */
  touch-action: none;
  /* -- Attention-- */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.scroll-view > div {
    min-height: 101%;
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
</style>

手机上不能点击的处理办法

<template>
  <iscroll-view :options="{preventDefault: false}">
    Your contents
  </iscroll-view>
</tempalte>

滚动事件

<template>
  <iscroll-view @scrollStart="log">
    Your contents
  </iscroll-view>
</tempalte>

<script>
export default {
  methods: {
    log (iscroll) {
      console.log(iscroll)
    }
  }
}
</script>

返回顶部

<template>
  <div>
    <iscroll-view ref="iscroll">
      Your contents
    </iscroll-view>
    <button @click="scrollToTop">Scroll To Top</button>
  </div>
</tempalte>

<script>
export default {
  methods: {
    scrollToTop () {
      const iscroll = this.$refs.iscroll
      iscroll.scrollTo(0, 0, 100)
      iscroll.refresh()
    }
  }
}
</script>

上拉下拉事件

<template>
  <iscroll-view @pullUp="load" @pullDown="refresh">
    Your contents
  </iscroll-view>
</tempalte>

<script>
export default {
  methods: {
    refresh (iscroll) {
      // Refresh current data
    },
    load (iscroll) {
      // Load new data
    }
  }
}
</script>