H5下拉刷新上拉加载更多

所属分类:UI-加载,滚动

 72769  419  查看评论 (10)
分享到微信朋友圈
X
H5下拉刷新上拉加载更多 ie兼容10

使用方法

1)在页面上添加两个元素

<div id="demo">
    <div style="text-align:center">正在加载中...</div>
</div>
<div class="x-pullfresh-more">加载更多</div>

2 ) 加载数据方法

pullrefresh.doRefresh({
    debug: true, // 模拟真实请求数据,否则会出现ajax跨域,正式使用中请去h5.js中删除debug代码   
    url: './list.json', // 必填,ajax加载数据请求的地址   
    data: {
        size: 20
    }, // 非必填,ajax请求数据的参数,如果启用了缓存,将影响浏览器的缓存数据  
    dataType: "json", // 非必填,ajax请求返回的数据类型  
    container: '#demo', // 非必填,用于计算document.body.scrollTop等于多少时自动加载更多数据   
    cache: 'test', // 非必填,如果不想让浏览器缓存请写false,否则请写唯一的标记,具体请观察sessionStorage   
    success: function(list, page, size) {
        // ajax请求成功后服务端返回来的数据        
        // 在此处理服务器返回的数据,绑定到demo元素中       
        return true; // 返回true表示还有更多数据;返回false表示没有更多数据了我通常写
        return list.length >= size
    }
});
相关插件-加载,滚动

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 28950  364

jquery实现图片预加载

jquery实现图片预加载
  加载
 49155  446

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

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

progress 标签制作加载(原创)

利用HTNL5新标签制作进度条加载,代码非常简单且实用。
  加载
 13257  213

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

    fyhhyf 0
    2018/3/15 14:39:58
    加载界面时,我发现有私自连接支付宝界面???? 回复
    逗伴 0
    2018/2/7 17:07:47
    谷歌火狐不能继续加载,上划不能加载更多
    回复
    素心 0
    2018/1/10 8:33:45

    这个插件有个bug,数据重复加载。。。

    回复
    hcxdyn2008 0
    2017/10/16 17:32:04
    血色 0
    2017/10/10 11:39:23

    不想要下拉刷新怎么办?

    回复
    开发--徐艳汝 0
    2017/8/30 15:29:45

    与jquerymobile冲突怎么办?

    回复
    gongfeng 0
    2017/8/28 16:47:29
    在海边卷起半边裤脚,漫步 0
    2017/7/4 11:11:41
    想问一下这个插件地址多少,像了解更详细的参数。。 回复
    守猪待兔 0
    2017/6/25 8:54:35
    下拉加载怎么使用 回复
    buyi998 0
    2017/6/23 9:30:38
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复