iscroll滑动下拉 结合 jquery mobile 实例应用

<!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, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title></title>
    <link href="../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"
        type="text/css" />
    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
    <script src="../Scripts/Jquerymobile/iscroll/iscroll.js" type="text/javascript"></script>
    <style type="text/css" media="all">
        body, ul, li
        {
            padding: 0;
            margin: 0;
            border: 0;
        }
        
        body
        {
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: 微软雅黑;
            background-color: #f9f9f9;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 1em;
        }
        #wrapper
        {
            position: absolute;
            z-index: 1;
            top: 0px;
            bottom: 0px;
            left: 0;
            width: 100%;
            overflow: auto;
        }
        
        #scroller
        {
            position: relative; /*    -webkit-touch-callout:none;*/
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            float: left;
            width: 100%;
            padding: 0;
        }
        
        #scroller ul
        {
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }
        
        #scroller li
        {
            background-color: #fafafa;
        }
        
        #scroller li > a
        {
            display: block;
        }
        
        /**
 *
 * 下拉样式 Pull down styles
 *
 */
        #pullDown, #pullUp
        {
            background: #fff;
            height: 40px;
            line-height: 40px;
            padding: 5px 10px;
            font-weight: bold;
            font-size: 12px;
            color: #888;
        }
        #pullDown .pullDownIcon, #pullUp .pullUpIcon
        {
            display: block;
            float: left;
            width: 40px;
            height: 40px;
            background: url(../Scripts/Jquerymobile/iscroll/[email protected]) 0 0 no-repeat;
            -webkit-background-size: 40px 80px;
            background-size: 40px 80px;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 250ms;
        }
        #pullDown .pullDownIcon
        {
            -webkit-transform: rotate(0deg) translateZ(0);
        }
        #pullUp .pullUpIcon
        {
            -webkit-transform: rotate(-180deg) translateZ(0);
        }
        
        #pullDown.flip .pullDownIcon
        {
            -webkit-transform: rotate(-180deg) translateZ(0);
        }
        
        #pullUp.flip .pullUpIcon
        {
            -webkit-transform: rotate(0deg) translateZ(0);
        }
        
        #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon
        {
            background-position: 0 100%;
            -webkit-transform: rotate(0deg) translateZ(0);
            -webkit-transition-duration: 0ms;
            -webkit-animation-name: loading;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }
        #thelist
        {
            min-height: 600px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div data-role="page" id="pageone">
            <div id="scroller">
                <div data-role="content">
                    <div id="pullDown">
                        <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
                    </div>
                    <ul id="thelist" data-role="listview" data-icon="false">
                        @*<li><a href="#">
                            <img src="../Content/Wallet/list/guoqi.png" width="100%" />
                            <h3>
                                test</h3>
                            <p>
                                testtesttesttesttesttesttesttesttesttest.</p>
                            <p class="ui-li-aside">
                                2014-12-25 20:37</p>
                        </a></li>*@
                        @{
                            string tempHtml = string.Empty;
                            string imgShow = string.Empty;
                            string tempTime = string.Empty;
                            if (tempGoldList != null && tempGoldList.Count > 0)
                            {
                                foreach (KeyValuePair<AdDividendCDTO, string> _model in tempGoldList)
                                {
                                    tempHtml += "<li>";
                                    if (_model.Key.Status == 1)
                                    {
                                        imgShow = "../Content/Wallet/list/";
                                    }
                                    else if (_model.Key.Status == 2)
                                    {
                                        imgShow = "../Content/Wallet/list/";
                                    }
                                    else
                                    {
                                        imgShow = "../Content/Wallet/list/";
                                    }
                                    tempHtml += "<a href=\"#\" onclick=\"Goto(‘RemindWallet?curChangeOrg=00000000-0000-0000-0000-000000000000&sessionId=" + ViewBag.sessionid + "&userId=" + ViewBag.UserId + "&appId=" + ViewBag.AppId + "&isAnnon=" + ViewBag.IsAnnon + "&deviceId=" + ViewBag.DeviceId + "&os=" + ViewBag.MobileType + "&appName=" + ViewBag.AppName + "&msgId=" + _model.Key.Id + "‘)\">";
                                    tempHtml += "<img src=\"" + imgShow + "\" width=\"50em\" height=\"50em\" style=\"margin:0.3em;\">";
                                    tempHtml += "<p style=\"font-size:1.0em;width:80%;\">" + _model.Value + "</p>";
                                    tempHtml += "<p style=\" color:#a3a3a3; font-size:0.95em;\"></p>";
                                    tempHtml += " <p class=\"ui-li-aside\" style=\" color:#a3a3a3; font-size:0.95em; top:0.7em;\">" + _model.Key.DueDateStr + "<p>";
                                    tempHtml += "</a>";
                                    tempHtml += "</li>";
                                }
                            }
                           
                        }
                        @(new HtmlString(tempHtml))
                    </ul>
                    <div id="pullUp">
                        <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <input type="hidden" id="HidSessionId" value="@(ViewBag.sessionid)" />
        <input type="hidden" id="HidUserId" value="@(ViewBag.UserId)" />
        <input type="hidden" id="HidAppId" value="@(ViewBag.AppId)" />
        <input type="hidden" id="HidIsAnnon" value="@(ViewBag.IsAnnon)" />
        <input type="hidden" id="HidDeviceId" value="@(ViewBag.DeviceId)" />
        <input type="hidden" id="HidMobileType" value="@(ViewBag.MobileType)" />
        <input type="hidden" id="HidAppName" value="@(ViewBag.AppName)" />
    </div>
</body>
</html>
<script type="text/javascript">

    var myScroll,
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset,
    generatedCount = 0;

    /**
    * 下拉刷新 (自定义实现此方法)
    * myScroll.refresh();        // 数据加载完成后,调用界面更新方法
    */
    function pullDownAction() {
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!

            //模拟浏览器数据加载延迟
            UpOrDown = 0;
            CurrentPage = 1;
            GetData();

            myScroll.refresh();     //数据加载完成后,调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
    };

    /**
    * 滚动翻页 (自定义实现此方法)
    * myScroll.refresh();        // 数据加载完成后,调用界面更新方法
    */
    function pullUpAction() {
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
            UpOrDown = 1;
            GetData();

            myScroll.refresh();     // 数据加载完成后,调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000); //
    };


    /**
    * 初始化iScroll控件
    */
    function loaded() {
        pullDownEl = document.getElementById(pullDown);
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById(pullUp);
        pullUpOffset = pullUpEl.offsetHeight;

        myScroll = new iScroll(wrapper, {
            scrollbarClass: myScrollbar, /* 重要样式 */
            useTransition: false, /* 此属性不知用意,本人从true改为false */
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match(loading)) {
                    pullDownEl.className = ‘‘;
                    pullDownEl.querySelector(.pullDownLabel).innerHTML = 下拉刷新...;
                } else if (pullUpEl.className.match(loading)) {
                    pullUpEl.className = ‘‘;
                    pullUpEl.querySelector(.pullUpLabel).innerHTML = 上拉加载更多...;
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match(flip)) {
                    pullDownEl.className = flip;
                    pullDownEl.querySelector(.pullDownLabel).innerHTML = 松手开始更新...;
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match(flip)) {
                    pullDownEl.className = ‘‘;
                    pullDownEl.querySelector(.pullDownLabel).innerHTML = 下拉刷新...;
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(flip)) {
                    pullUpEl.className = flip;
                    pullUpEl.querySelector(.pullUpLabel).innerHTML = 松手开始更新...;
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(flip)) {
                    pullUpEl.className = ‘‘;
                    pullUpEl.querySelector(.pullUpLabel).innerHTML = 上拉加载更多...;
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match(flip)) {
                    pullDownEl.className = loading;
                    pullDownEl.querySelector(.pullDownLabel).innerHTML = 加载中...;
                    pullDownAction(); // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match(flip)) {
                    pullUpEl.className = loading;
                    pullUpEl.querySelector(.pullUpLabel).innerHTML = 加载中...;
                    pullUpAction(); // Execute custom function (ajax call?)
                }
            }
        });

        setTimeout(function () { document.getElementById(wrapper).style.left = 0; }, 800);
    }

    //初始化绑定iScroll控件 
    document.addEventListener(touchmove, function (e) { e.preventDefault(); }, false);
    document.addEventListener(DOMContentLoaded, loaded, false); 

</script>
<script type="text/javascript">
    var CurrentPage = 2;
    var UpOrDown = 1; //0:下滑,1:上滑

    $(function () {
    });

    function GetData() {

        if (UpOrDown == 0) {
            CurrentPage = 1;
        }
        var postdata = {
            userId: $("#HidUserId").val(),
            appId: $("#HidAppId").val(),
            isAnnon: $("#HidIsAnnon").val(),
            deviceId: $("#HidDeviceId").val(),
            os: $("#HidMobileType").val(),
            appName: $("#HidAppName").val(),
            sessionid: $("#HidSessionId").val(),
            pageIndex: CurrentPage,
            pageSize: 15
        };


        $.ajax({
            async: true,
            type: "POST",
            dataType: "json",
            url: "/Wallet/AjaxGetWalletList?r=" + Math.random(),
            data: postdata,
            success: function (data) {
                if (data) {
                    var dataContent = "";
                    var RefContent = "";
                    var itemThelist = $("#thelist");
                    for (var i = 0; i < data.length; i++) {
                        dataContent = createItem(data[i]);
                        if (UpOrDown == 1) {
                            itemThelist.append(dataContent)
                        } else {
                            RefContent += dataContent
                        }
                    }
                    if (UpOrDown == 0) {
                        itemThelist.html(RefContent);
                    }
                    //数据加载完成后,调用页面更新方法
                    myScroll.refresh();
                    if (data.length > 0) {
                        CurrentPage++;
                    }
                }
            },
            error: function (err) {
                myScroll.refresh();
            }
        });
    }


    var template = <li class="ui-li-has-thumb ui-first-child"><a class="ui-btn" href="#" onclick="Goto(\‘RemindWallet?curChangeOrg=00000000-0000-0000-0000-000000000000&sessionId={sessionid}&userId={userid}&appId={appid}&isAnnon={isAnnon}&deviceId={deviceId}&os={MobileType}&appName={appName}&msgId={msgId}\‘)">
                        + <img src="{image}" width="50em" height="50em" style="margin:0.3em;" />
                        + <p style="font-size:1.0em;width:80%;">{message}</p>
                        + <p style=\" color:#a3a3a3; font-size:0.95em;\"></p>
                        + <p class="ui-li-aside" style="color:#a3a3a3; font-size:0.95em; top:0.7em;">
                        + {time}</p></a></li>;


    function createItem(data) {
        var str = template;
        str = str.replace("{sessionid}", $("#HidSessionId").val());
        str = str.replace("{userid}", $("#HidUserId").val());
        str = str.replace("{appid}", $("#HidAppId").val());
        str = str.replace("{isAnnon}", $("#HidIsAnnon").val());
        str = str.replace("{deviceId}", $("#HidDeviceId").val());
        str = str.replace("{MobileType}", $("#HidMobileType").val());
        str = str.replace("{time}", data.Key.DueDateStr);
        str = str.replace("{msgId}", data.Key.Id);
        str = str.replace("{message}", data.Value);
        str = str.replace("{appName}", $("#HidAppName").val());

        if (data.Key.Status == 1) {
            str = str.replace("{image}", "../Content/Wallet/list/");
        } else if (data.Key.Status == 2) {
            str = str.replace("{image}", "../Content/Wallet/list/");
        }
        else {
            str = str.replace("{image}", "../Content/Wallet/list/");
        }
        return str;
    }


    function Goto(_href) {
        window.location.href = _href;
    }
</script>

 

jquery mobile 全局性比较强,因此在页面设计的时候尽可能的 单独添加元素的样式,修改本身样式表一定要谨慎,以免影响其他页面。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。