iscroll 上拉加载下拉刷新

所属分类:UI-加载

 2749  23  查看评论 (8)
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)。

相关插件-加载

JS简单进度条

再也不愁JS进度条了
  加载
 7249  40

11种Loading 动态效果+随机样式

css实现动态loading 效果
  加载
 17354  106

HTML5手机端手指滑动上拉加载

jQuery HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发。
  加载
 6013  101

jQuery css3刷新加载

jQuery CSS3网页预加载动画
  加载
 9630  28

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

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

    可否实现上拉跳转页面?

    回复
    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
        大家都是充的  
    回复
取消回复