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

来源：互联网发布：手机模拟器网络加速器编辑：程序博客网时间：2024/05/22 22:31

<!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.csdn.net/detail/wf001015/9824775

0 0