基本使用方法：

$ npm i vue-iscroll-view --save-dev $ npm i iscroll --save-dev

　　

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

　　

手機上不能點擊的處理辦法

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

　　

滾動事件

<template><iscroll-view @scrollStart="log">Your contents</iscroll-view> </tempalte><script> export default {methods: {log (iscroll) {console.log(iscroll)}} } </script>

　　

返回頂部

<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.iscrolliscroll.scrollTo(0, 0, 100)iscroll.refresh()}} } </script>

　　

上拉下拉事件

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

　　

轉自：http://blog.csdn.net/weixin_38788947/article/details/77447785?fps=1&locationNum=3

轉載于:https://www.cnblogs.com/ourLifes/p/8386744.html

總結

以上是生活随笔為你收集整理的VUE iscroll（银联二维码，浩哥页面用过）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。