安装

$ npm i vue-vroll
$ npm i iscroll

使用

import vRoll from 'vroll'
Vue.use(vRoll);

<template>
  <vroll class="scroll-view">
    Your contents
  </vroll>
</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;
}
</style>

Usage

Set IScroll options

<template>
  <vroll :options="{preventDefault: false}">
    Your contents
  </vroll>
</tempalte>

Listen IScroll events

<template>
  <vroll @scrollStart="log">
    Your contents
  </vroll>
</tempalte>

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

Call IScroll instance functions

<template>
  <div>
    <vroll ref="iscroll">
      Your contents
    </vroll>
    <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>

Custom events

• pullUp
• pullDown

<template>
  <vroll @pullUp="load" @pullDown="refresh">
    Your contents
  </vroll>
</tempalte>

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