iscroll 上拉加载下拉刷新

所属分类:UI-加载

 14233  53  查看评论 (32)
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)。

相关插件-加载

jQuery进度条插件jqbar

柱状图动态显示工具
  加载
 17385  67

jquery 实现流程进度显示

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

申请表单进度表

申请表单进度表
  加载
 12701  173

jQuery简单进度条插件

jQuery简单实用的轻量级进度条插件
  加载
 44167  57

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

    菩提心子。 0
    2018/6/22 15:38:04
    兄弟们那,怎么判断上拉还是下拉,,就是禁止下拉动画不要下拉,,找了好久了 回复
    七城 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

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

    回复
    樊凯蹦 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

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

        promising_li0
        2017/10/13 16:18:32

        请教一下,当上面有列表时怎么用啊

        SmallPeaches9990
        2018/1/5 15:32:37

        是一样的用法,只不过你要把初始化位置改变一下

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

    可否实现上拉跳转页面?

        SmallPeaches9990
        2017/6/5 15:52:52

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

    回复
取消回复