jquery mobile实现html5下拉刷新，实现pc与phone的兼容

最新推荐文章于 2020-12-21 10:22:24 发布

小年轻only

最新推荐文章于 2020-12-21 10:22:24 发布

阅读量2.5k

点赞数

文章标签： html5 jquery mobile

本文链接：https://blog.youkuaiyun.com/wf001015/article/details/70696851

版权

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="jqm/stylesheets/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
    <link href="jqm/stylesheets/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
    <link href="jqm/stylesheets/jquery.mobile.iscrollview-pull.css" rel="stylesheet"
        type="text/css" />

    <script src="jqm/javascripts/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script src="jqm/javascripts/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

    <script src="jqm/javascripts/iscroll.js" type="text/javascript"></script>

    <script src="jqm/javascripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">
        $(function() {
            getdata();

        });
        function getdata() {
            var json = [{ name: "我是程序猿1", age: 20 }];
            var html = "";
            if (json != "") {
                for (var i = 0; i < json.length; i++) {
                    html += "<li><a href=''>";
                    html += "<h3>" + json[i].name + "</h3>";
                    html += "<p>" + json[i].age + "</p>";
                    html += "</a></li>";


                }
            }
            $("#list").append(html);
            $('#list').listview('refresh');
        }      
    </script>

    <script type="text/javascript" charset="utf-8">

        (function pullPagePullImplementation($) {
            "use strict";
            var listSelector = "div.pull-demo-page div.mycolset",
      lastItemSelector = listSelector;



            function gotPullDownData(event, data) {
                var iscrollview = data.iscrollview;
                //下拉加载数据
                getdata();
                iscrollview.refresh(null, null,
                  $.proxy(function afterRefreshCallback(iscrollview) {
                      this.scrollToElement(lastItemSelector, 400);
                  }, iscrollview));

            }

            function gotPullUpData(event, data) {
                var iscrollview = data.iscrollview;
                //上拉加载数据
                getdata();
                iscrollview.refresh(null, null,
      $.proxy(function afterRefreshCallback(iscrollview) {
          this.scrollToElement(lastItemSelector, 400);
      }, iscrollview));
            }

            function onPullDown(event, data) {
                setTimeout(function fakeRetrieveDataTimeout() {
                    gotPullDownData(event, data);
                },
      1500);
            }

            // Called when the user completes the pull-up gesture.
            function onPullUp(event, data) {
                setTimeout(function fakeRetrieveDataTimeout() {
                    gotPullUpData(event, data);
                },
      1500);
            }

            // Set-up jQuery event callbacks  
            $(document).delegate("div.pull-demo-page", "pageinit",

    function bindPullPagePullCallbacks(event) {
        $(".iscroll-wrapper", this).bind({
            iscroll_onpulldown: onPullDown,
            iscroll_onpullup: onPullUp
        });
    });


        } (jQuery));



    </script>

</head>
<body>
    <div class="pull-demo-page" data-role="page">
        <div data-iscroll="" data-role="content">
            <div class="iscroll-pulldown">
                <span class="iscroll-pull-icon"></span><span class="iscroll-pull-label" data-iscroll-loading-text="加载数据"
                    data-iscroll-pulled-text="加载数据"></span>
            </div>
            <ul data-role="listview" id="list" data-inset="true">
            </ul>
            <div class="iscroll-pullup">
                <span class="iscroll-pull-icon"></span><span class="iscroll-pull-label" data-iscroll-loading-text="加载数据"
                    data-iscroll-pulled-text="加载数据"></span>
            </div>
        </div>
    </div>
</body>
</html>

上拉刷新效果图

下拉刷新效果图

源代码下载地址

http://download.youkuaiyun.com/detail/wf001015/9824775