上拉加载下拉刷新refresher v2.0

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

 50845  426  查看评论 (22)
分享到微信朋友圈
X
上拉加载下拉刷新refresher v2.0 ie兼容9

1.首先引用必须的文件

<link rel="stylesheet" href="pullToRefresh.css"/>
<script src="pullToRefresh.js"></script>
<script src="colorful.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(); --- ****/
    }


相关插件-加载,滚动

JS简单进度条

再也不愁JS进度条了
  加载
 39356  332

jQuery进度条插件jqbar

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

申请表单进度表

申请表单进度表
  加载
 35716  498

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

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

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

    咖啡加冰 0
    2019/6/11 9:55:09
    到达底部之后怎样禁止不再添加数据 回复
    medivhzd 0
    2017/11/15 16:17:37
    初始数据少于一屏时,下拉bug 多多啊,感觉和iscroll没啥区别。 回复
    !!!!!! 0
    2017/10/16 10:45:42
    A时光凉 春衫薄 0
    2017/4/12 15:51:45

    我想问下,此功能, 能不能用在同一页面不同栏目之间切换,上拉刷新吗?

        华Dee0
        2017/4/12 15:52:59

        点我头像,下载另外一个最新的

    回复
    0
    2017/2/22 14:56:45
    搞不明,如何触发上下拉。加载完数据之后,上拉一点点就触发了刷新,怎么办?是设置触发条件吗? 回复
    孙远飞 0
    2017/2/9 11:31:49

    我先问下上拉下拉我都发现 只要我触发动作就会刷新,我拖动下拉上拉界面出现,再移动回去还是触发上拉下拉事件,还有refresh3.0首次进入往上滑动一点都会触发加载更多页面还出现卡顿现象 ,我就不明白难道你测试都没发现吗

    回复
    Mr.ChOW~ 0
    2016/10/24 16:10:50
    上拉刷新方法中写jq的ajax,在pc上有上拉刷新的效果,但在真机上没有效果 回复
    人淡且懒 0
    2016/5/17 9:05:37
    这个要怎么改?可以有些注明么? jS新手 回复
    The Wind Rises 0
    2016/4/6 16:04:43
    楼主,可不可以让插件刷新的时候,上面的下拉不自动往下刷新一下 回复
    过去 0
    2016/1/7 17:01:43

    支持一个页面多个调用是什么意思??求指教

        激情奢华的魅力0
        2016/3/11 11:03:05
        同问。。。  你解决了吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复