Skip to content
IScroll-view component for Vue 2.x
Branch: master
Clone or download
Latest commit efd770f Jun 15, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs lint Jun 15, 2017
spec/support Support hash tag Nov 25, 2016
src lint Jun 15, 2017
test Remove useless codes. Feb 14, 2017
.babelrc
.eslintrc.js
.gitignore
LICENSE Initial commit Nov 16, 2016
README.md Create README.md Jun 8, 2017
index.js
package-lock.json
package.json lint Jun 15, 2017
webpack.config.js `vue-iscroll-lite` is deprecated. Using `vue-iscroll-view` instead. Feb 14, 2017

README.md

npm version

vue-iscroll-view

IScroll component for Vue 2.x

Demo

https://dafrok.github.io/vue-iscroll-view/

Built with vue-iscroll-view

Install

$ npm i vue-iscroll-view
$ npm i iscroll

Get Start

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;
}
</style>

Usage

Set IScroll options

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

Listen IScroll events

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

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

Call IScroll instance functions

<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>

Custom events

  • pullUp
  • pullDown
<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>

The Scroller

Each iscroll instance contains a wrapper and a scroller, the <iscroll-view> element is simply a reference the wrapper. If you need to take control of the scroller, the following case may help you.

<template>
  <iscroll-view ref="iscroll" :scrollerStyle="{color: 'red'}" scrollerClass="{scroller: true}">
    Your contents
  </iscroll-view>
</tempalte>

<script>
export default {
  mounted () {
    /* Get the reference of the scroller */
    const $scroller = this.$refs.iscroll.$refs.scroller
    console.log($scroller)
  }
}
</script>

<style scoped>
.scroller {
  background: blue
}
</style>
You can’t perform that action at this time.