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

最新推荐文章于 2024-06-07 09:41:27 发布

许R

最新推荐文章于 2024-06-07 09:41:27 发布

阅读量6k

点赞数

文章标签： HTML5 移动端上拉刷新

本文链接：https://blog.csdn.net/u010335397/article/details/51383346

版权

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

废话少说，先上代码：



<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>iScroll-5 DEMO: Pull to Refresh + Infinite Next Page load</title>

    <script type="text/javascript" src="./js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="./js/iscroll-probe.js"></script>

    <script type="text/javascript">

        var items_per_page = 10;
        var scroll_in_progress = false;
        var myScroll;

        load_content = function (refresh, next_page) {

            // This is a DEMO function which generates DEMO content into the scroller.
            // Here you should place your AJAX request to fetch the relevant content (e.g. $.post(...))

            console.log(refresh, next_page);
            setTimeout(function () { // This immitates the CALLBACK of your AJAX function
                if (!refresh) {
                    // Loading the initial content
                    $('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
                    $('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
                    $('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
                    $('#wrapper > #scroller > ul').append('<li&