vue iscroll5 下拉刷新

1. 引用js

如果需要刷新的页面太多可以在main.js中配置，否则就在需要的页面中引用即可。

误区：由于vue引用文件的特殊性，不能直接import原生的js文件，否则会报错该js文件没有export IScroll。

正确做法：$npm i iscroll --save-dev

                  import IScroll from 'iscroll/build/iscroll-probe.js' （需要这个版本）

2. 使用

正常的使用方法可以参照iscroll给出的文档。不会使用时，可以先参看demo中的例子。以下给出了一些我遇到的问题：

一：页面会报错，原因是找不到页面元素或页面无法拉动

主要原因：数据请求是异步的，在数据加载之前初始化iscroll导致iscroll无法获取内容的高度，从而出现了无法拉动的情况。

解决办法：将 iscroll 的初始化放在数据请求中

其他原因：iscroll 样式有误；数据不够多，不用拉动

二：scroll.on 的几个自定义事件，如：myScroll.on('scroll', this.updatePosition()); ‘scroll’ ‘scrollEnd’ 事件定义方法有误，不好调用method中的方法，要写成匿名函数。

正确做法：事件中的方法定义为匿名函数。如果要调用method中方法时用_this.function来调用。

this.myScroll.on('scroll', function () {

console.log(this.y >> 0) // 获取滑竖直方向滑动数值

_this.updatePosition('滑动')

})

三：scroll中<a>不能跳转

原因：被禁止了浏览器的默认事件。

解决：初始化中加上 {click: true, taps: true}

四：下拉刷新时，页面重新定位到顶部

解决办法： myScroll.scrollTo(0, 0, 1)  // 回到滚动条顶部

setTimeout(function () {

_this.myScroll.refresh() // 刷新iscroll

}, 0)