UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

html下拉刷新上拉加载Refresher3.0

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

 82776  483  查看评论 (61)
分享到微信朋友圈
X
html下拉刷新上拉加载Refresher3.0 ie兼容11
 查看演示  立即下载

1.首先引用必须的文件

<link rel="stylesheet" href="pullToRefresh.css"/>
<script src="js/iscroll.js"></script>
<script src="js/pullToRefresh.js"></script>


2.加入需要的html，结构如下

<div id="wrapper">
  <ul>
    <li>row 10</li>
    <li>row 9</li>
    <li>row 8</li>
    <li>row 7</li>
    <li>row 6</li>
    <li>row 5</li>
    <li>row 4</li>
    <li>row 3</li>
    <li>row 2</li>
    <li>row 1</li>
  </ul>
</div>


3.初始化插件

refresher.init({
    id:"wrapper",
    pullDownAction:Refresh,                                                            
    pullUpAction:Load                                                                             
    });    
    function Refresh() {       
    // <-- Simulate network congestion, remove setTimeout from production!
        wrapper.refresh();/****remember to refresh after  action completed！ --example-yourId.refresh(); ----| ****/
    } 
    
    function Load() {
    // <-- Simulate network congestion, remove setTimeout from production!
    wrapper.refresh();/****remember to refresh after action completed！！！   -example--yourId.refresh(); --- ****/
    }


相关插件-加载,滚动
查看更多

圆形进度条，再也不怕圆形进度条不兼容不帅气

 圆形进度条原理。转化为jquery也非常方便。 原理都差不多(原创)
  加载
 88517  430

progress 标签制作加载（原创）

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

jQuery进度条插件jqbar

 柱状图动态显示工具
  加载
 45828  360

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

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

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

    似此星辰非昨夜 0
    2020/12/15 11:23:16
    这个id可以自己定义吗，我定义后不显示了 回复
    逆命 0
    2020/8/27 16:57:49
    请问一下页数page在如何自增啊，wrapper.refresh()会刷新页数page也跟着刷新了; 回复
    lwkang 0
    2019/4/16 9:06:41
    感觉不错，下载试试 回复
    phper 0
    2019/3/16 20:05:43
    怎么去除上拉刷新？？
    回复
    迪豪 0
    2018/12/11 13:43:19
    我使用ajax加载时会出错 回复
    王奕扁 0
    2018/9/13 11:01:02
    当没有更多数据时如何展示没有更多？可否配置？
        俄是派大星的海绵宝宝0
        2018/10/16 13:41:01
        你解决了吗？ 我也需要显示这个，，，如果你解决了，能否告诉我啊，谢谢啦
    回复
    a294228566 0
    2017/11/23 0:15:03

    请问DIV结构如何使用？

    回复
    hh1996620 0
    2017/11/1 20:05:06
    我在下拉刷新写了个加载更多的ajax，结果一直在调用是为什么啊，不是很明白 回复
    EC-CMS 1
    2017/7/26 15:08:52

    加载ajax上拉时卡顿方法送出加一条

    setInterval("wrapper.refresh();","2000");
    //在外面让它2秒刷新下滚动条就ok了
    function Load() {
    wrapper.refresh();
    //在这里处理加载ajax时始终记住上一个滚动的位置，所以有点小卡
}
    回复
    EC-CMS 0
    2017/7/24 21:22:33
    向下滑很卡有什么解决方法
        落尽丶天涯0
        2017/11/11 10:16:57

        我也有一样的问题

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复