vue-iscroll-view
IScroll component for Vue 2.x
Demo
Built with vue-iscroll-view
Install
$ npm i vue-iscroll-view
$ npm i iscrollGet 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>