iscroll开发的上拉加载下拉刷新代码插件

92建站   2021-11-14   收藏本文

这套iscroll开发的上拉加载下拉刷新代码插件,基于iscroll的插件开发的,此插件需要在服务端运行,本地预览会有跨域问题,所以看效果要在服务器上面哦。

使用方法:

1、里面的ajax部分是自己写的本地数据。

2、你也可以把ajax的部分注释了, //sumL = data.body.totalNum;并且注释这行代码,在上面变量sumL=n,给一个数值,用于显示请求回来的数据的长度。

3、刷新滚动条的方法是自己添加的。页面初始化(请求ajax以后,添加数据,iscroll获取不到滚动条的位置,会造成一个页面锁死的状态,往上滑动的时候,是划不动的。所以呢,在添加数据之后,调用刷新滚动条的高度就可以解决了)以后。

4、在loaded里面做了判断(判断数据是否加载完毕)

5、下拉刷新,之前默认的是(下拉刷新是刷新滚动条的高度),后面改成(下拉刷新刷新整个页面并添加了一个随机数用于清楚缓存-----类似于F5的功能)--(这里有个问题,当页面展示区也就是(滚动区域)小于某个高度的时候,触发下拉刷新的同时会触发上拉加载,大于某个高度的时候并不会触发上拉加载,由于在这里是处理的是,下拉刷新是刷新整个页面(上拉加载还是好使的),反正也是刷新,就让他刷新整个页面了。在这里谁有好的方法解决最小高度的问题,欢迎评论)

6、数据添加(具体的数据添加方法,可自己写,我是一次全部请求回来,存在本地,然后每次添加需要的条数,你也可以每次触发上拉加载,去请求数据接口,完事以后添加进去)

7、你可以在页面中引入一个iscroll的压缩版js(压缩后只有4K)。

效果截图:

上拉加载代码,下拉刷新代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开