HTML5 移动端 上拉刷新 pull up to load more

Html5下拉刷新的方式有很多，这里我就不介绍了。但是上拉刷新的方式很难找到，或者参考API缺少，网上的代码又千篇一律。这里我简短的介绍两种上拉刷新方式，各有所长，仅供大家参考，互相学习。

1.最常用的iscroll.js

         iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差

滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：

l 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。

l 动画可以使用用户自定义的擦出功能（反弹'bounce'，弹性'elastic'，回退'back'，...）。

l 你可以很容易的挂靠大量的自定义事件（onBeforeScrollStart,*

l 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。

官方网站：http://iscrolljs.com/

中文翻译：https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/customevents.html

Iscroll版本：5

废话少说，先上代码：

    

    

    
    

    

    


iScroll

    

        

             
            Pull down to refresh...
        
        
Pretty row initial content
Pretty row initial content
Pretty row initial content
Pretty row initial content
        

    
    

pull_to_refresh.png图片如下                                                                                                                        

效果如下：

个人感受：iscroll版本之间的不兼容，网上资料的陈旧和混乱，给iscroll学习带来很多不必要的代价。同时，iscroll麻烦的css样式控制和js事件控制，也需要时间进行学习和掌握。

但是iscroll友好的动态效果，炫酷的界面对开发人员来说还是很有吸引力的。

1.利用jquery判断是否滚动到底部，然后进行刷新加载

根据微信朋友圈中的上拉加载刷新方式，可以去除动画效果，快速的加载更多的数据。

利用到了jquery，优点是库简单，操作简单，无需在学习其他技术。

主要思路是：

页面加载时，判断是否存在scrollbar。不存在时，$(window).scroll中的回调函数将不会触发，即无法进行数据加载。所以进行scrollHeight==windowHeight判断。存在时，当

滚动条滚动到底部时，触发回调函数，进行页面数据加载。

效果图，使用Jquery方法，在ajax加载数据时，Mobile底部的动画加载效果（静态图）。

个人感受：jquery 的方法简单易操作，适用于想快速开发的人员，能轻易上手，自定义功能更加简单，不需要除jquery以外其他的第三方库。缺点是：没有像iscroll中酷炫的界面。

总之，萝卜白菜各有所爱，大家取舍之。