vroll
v1.0.4
Published
vroll for Vue 2.0 Component
Downloads
5
Readme
安装
$ 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>