vue2.0移动端平滑滚动控件

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