iscroll 上拉加载下拉刷新

所属分类:UI-加载

iscroll 上拉加载下拉刷新 ie兼容10

本地预览请用火狐浏览器,Chrome本地预览有跨域问题

使用方法

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

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

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

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

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

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

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

相关插件-加载

HTML5 SVG轻量级jQuery进度条插件

这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单,它提供了一些基本的参数来控制进度条的外观和动画,是一款非常实用的进度条插件。
  加载
 5605  21

纯js进度条

使用纯原生js封装而成的进度条插件,各种方便的回调函数,方便随时监控进度条的进度
  加载
 29550  41

菊花加载

超好用的菊花加载效果,可用于手机端
  加载
 22314  82

超炫酷的进度条

Bootstrap制作超酷进度条UI动画
  加载
 7239  42

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币

    ??Q-in^g?城ι?ν 0
    2017/9/21 14:22:06

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

    回复
    ??Q-in^g?城ι?ν 0
    2017/9/21 13:19:56

    我要初始10条数据怎么做

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

    博主 ,你知道写iscroll5的吗

        SmallPeaches9990
        2017/8/1 9:43:07

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

    回复
    樊凯蹦 0
    2017/7/6 13:07:15

    为什么在手机上滑不动啊   滑上去又掉下来了    请教如何解决?

        SmallPeaches9991
        2017/7/21 17:34:12
        那是因为,在初始化的时候,iscroll没有获取到你需要滑动的容器的高度,我也写了,一定要在渲染完毕以后,刷新滚动条的高度,才可以的。之前我也是碰到你这个问题,初始化,必须先要下拉刷新一次,才可以往上滑动。后来才知道,初始化没获取到容器高度,只是进行了渲染,没有走myScroll.refresh()这个。刷新完以后才走了这个。
    回复
    陈赛鹤 0
    2017/6/16 10:52:48

    如果列表上边还有内容,感觉就不太好用

        SmallPeaches9990
        2017/6/24 10:02:49

        这个我倒没设置,想想的话,有内容和没内容差不多,只不过是设置一些初始位置,应该没问题了,比较样式都是由你来控制的

    回复
    Lsyu 0
    2017/5/27 11:19:21

    可否实现上拉跳转页面?

        SmallPeaches9990
        2017/6/5 15:52:52

        可以的,不是有下拉添加数据吗,在上拉里面添加跳转方法就可以了。你想这么玩就怎么玩。

    回复
    Jason 0
    2017/5/10 10:09:51

    这平台是不错 就是不是免费的  但收费的质量也好一些

        SmallPeaches9990
        2017/5/10 10:21:37
        来这里大家一方面技术交流一下,一方面觉得自己技术好,可以来增加关注,提高知名度。
    回复
    Roar ' 0
    2017/4/26 10:02:39

    这样感觉很容易手误刷新

        SmallPeaches9991
        2017/4/28 17:06:48

        是的,因为当时我写的时候,业务这块是需要下拉手动刷新的!原来的是下拉也是刷新滚动条位置的。如果业务不需要,确实很容易造成刷新页面的,也可以改成下拉让在顶部添加内容也可以。

    回复
    Wait for me, will you? 0
    2017/4/15 21:10:25

    怎么获得jq币

        SmallPeaches9990
        2017/4/17 10:54:06

        我也是第一次上传,要不你问问别人。

        90后大叔0
        2017/5/2 9:39:05
        大家都是充的  
        壮士慢走,先干了这碗热翔0
        2017/8/24 10:24:59

        花钱砸的

    回复
取消回复