iscroll 上拉加载下拉刷新

所属分类:UI-加载

 58044  344  查看评论 (40)
分享到微信朋友圈
X
iscroll 上拉加载下拉刷新 ie兼容10

注:此插件需要在服务端运行,本地预览会有跨域问题!

使用方法

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

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

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

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

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

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

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

相关插件-加载

jquery 实现流程进度显示

基于jQuery实现的流程进度显示,可应用于网络订单状态查看,用户注册状态查看等
  加载
 71861  591

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 33504  312
  加载
 36960  365

JS简单进度条

再也不愁JS进度条了
  加载
 40258  332

讨论这个项目(40)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    全网--程伟恒 0
    2018/11/5 14:14:07
    Cannot read property 'offsetHeight' of null 第一次用这个东西,这个错是什么原因呀,求指教
        SmallPeaches9990
        2018/11/5 16:13:43
        你先预览一下效果,然后下载代码,按照我描述的使用方法,看第二条,用webstrom打开,你或者你直接看ajax返回的值,都是为了一个数据长度。你再试一下。
    回复
    浅喜深爱 0
    2018/10/29 19:12:33
    我下载了不能用吗?第一次接触iscroll,不太懂
        SmallPeaches9991
        2018/11/5 10:50:49
        可以用,你用webstrom 打开,不然会存在跨域。挥着你把ajax 的部分注释了。sumL给一个数值,就好了,看上面简介就好。
    回复
    Sunshine 0
    2018/7/27 13:39:06
    难道只有我觉得滚动加载后的数据有些不顺畅吗?
        SmallPeaches9991
        2018/8/20 10:44:25
        会有一点卡顿,唯一的可能就是你可能没有刷新滚动条,每次加载完都要刷新一下滚动条,我现在在做tab切换多行下拉刷新,上拉加载,这个时候就会一点在tab切换的时候,滚动条不能及时刷新,会有一点卡,不过,先解决需求,再来慢慢优化细节
    回复
    菩提心子。 0
    2018/6/22 15:38:04
    兄弟们那,怎么判断上拉还是下拉,,就是禁止下拉动画不要下拉,,找了好久了
        SmallPeaches9991
        2018/8/20 10:39:15
        function pullDownAction() {
            console.log("下拉");
            //alert('pullDown')
            setTimeout(function() {
                (function reloadPage() {
        
                    pullDownReload()
                    // window.location.reload();
        
                })();
                myScroll.refresh();
            }, 1000);
        }

        这个是下拉的动作,如果不需要下拉,你可以在这个里面不做任何处理,我这个是在里面做了下拉刷新,如果你需要就注释了,但是这个下拉动作还是保留的好。

        SmallPeaches9991
        2018/8/20 10:41:08
        还有就是,下拉的动作不需要的话,得去scroll里面去改,至于这个下拉这个动作,个人觉得还是保留比较好,不熟悉改来改去会有问题的。
    回复
    七城 0
    2018/6/15 9:36:22
    滚动条能默认在底部码
        SmallPeaches9991
        2018/6/15 10:27:34
        可以记录滑动高度,并且每次点击可以动态赋值,不过我试了一下,就是有些慢,会有个1-2s,
    回复
    SmallPeaches999 0
    2018/5/23 16:43:09
    福利来了:
    后续会给大家出一个tab切换的下拉刷新和上拉加载列表,一个页面多个上拉加载,下拉刷新并存。可实现单独每个单独的tab切换的上拉和下拉,初始化默认加载。按需加载(点击其他的tab请求对应的列表数据,仅限于第一次,之后点击tab切换不会请求数据,之后就是上拉加载加载数据,和下拉刷新清空列表,重新请求),敬请期待......
        SmallPeaches9990
        2018/5/23 16:48:51
        还有,如果请求的数据为空,或者不存在,显示暂无数据的模块的显示和隐藏等等......
        wwf199908140
        2018/5/26 16:15:03
        作者你好,请问什么时候出,只需要
        SmallPeaches9990
        2018/5/27 10:41:58
        估计下周吧!这周在修改bug,下周项目出完,我就会提上来。
        wwf199908140
        2018/6/6 15:10:35
        一直等这个插件:>
        SmallPeaches9990
        2018/6/11 15:32:59
        现在我们移动端可能要等等才上线,如果你着急需要,我可以先私发给你先试着看下,我只是调通了,没有做接口测试,应该没有什么大的问题,1103766447,你先看下,我回头把所有的注释添加一下,不过慢慢捋,还是清楚的
    回复
    SmallPeaches999 0
    2018/4/28 16:51:04

    补充:
    如果上边存在导航条,或者上边存在内容,也是可以正常使用的,只要设置

    <div id="wrapper">

    的top属性就可以了。
    我的导航条高度50px;正常使用也可以,你也可以设置整个滑动的大小,不过过小可能操作起来不太方便。

    #wrapper {
        display: none;
        position: absolute;z - index: 1;
        top: 50 px;
        bottom: 0 px;
        left: -9999 px;
        width: 100 % ;
        background: #aaa;
        overflow: auto;
    }
    回复
    ??Q-in^g?城ι?ν 0
    2017/9/21 14:22:06

    怎么  能局部刷新  不要整个页面刷新

        SmallPeaches9990
        2017/10/9 13:48:00
        没明白你什么意思,这是整个页面刷新的。
    回复
    ??Q-in^g?城ι?ν 0
    2017/9/21 13:19:56

    我要初始10条数据怎么做

        SmallPeaches9990
        2017/10/9 13:46:52

        看到我初始化5条数据没,你初始化请求到的数据,把默认的数据替换条就ok了。里面有个add方法。

    回复
    小橘子 0
    2017/7/31 22:39:40

    博主 ,你知道写iscroll5的吗

        SmallPeaches9990
        2017/8/1 9:43:07

        没用过,你可以看下源码,看他下拉,上拉对应的源码,其他就不需要看了,看看人家是怎么样实现的。你也可以修改他的源码

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复