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)

发布了119 篇原创文章 · 获赞 21 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/beauty5188/article/details/96436058