记录webApp 中使用下拉刷新，上拉加载的的实例

使用 pullToRefresh.js和iscroll.js

首先页面引入相关文件

<script src="../../../js/jquery-2.1.3.min.js"></script>
    <script src="../../../js/pullToRefresh.js"></script>
    <script src="../../../js/iscroll.js"></script>
    <link href="../../../scrollcss/reset.css" rel="stylesheet" />
    <link href="../../../scrollcss/pullToRefresh.css" rel="stylesheet" />

　　html部分

 <div id="wrapper" class="wrapper page-home">
        <div><%--这个div标签必写因为在iscrool.js中取id为wrapper下的第一个元素为滑动对象--%>
            <div class="couponList">
            </div>
            <i id="onloadMore">点击加载更多...</i>

        </div>
    </div>

　　js部分

判断是PC端还是移动端

var system = {};
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
var isPC = system.win || system.mac || system.xll;

　　在页面加载完成的时候调用下面方法

function judgeIsPC() {
            //debugger;
            var height = $(window).height();
            var width = $('#device_group').innerWidth();
            var width = $('#device_group').outerWidth();
            isPC = false;
            if (isPC) {//PC端
                // debugger;
                $('html').css({ "height": "100%", "overflow": "hidden" });
                $('body').css({ "height": "100%", "overflow": "hidden" });
                $(".couponList").css({ "height": height - 122, "overflow-y": "auto" });//$(".couponList")为需要分页显示数据的元素
                $(".pullUp").hide();
                $("#onloadMore").show();               
            } else {               
                refresher.init({
                    id: "wrapper",
                    pullDownAction: Refresh,//下拉刷新时调用的方法
                    pullUpAction: Load//上拉加载更多时调用的方法
                });
                $("#wrapper").css({ "height": height-46, "min-height":0});
                wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
                $("#onloadMore").hide();
                setTimeout(function () {
                    var el, li, i;
                    el = document.querySelector("#wrapper div");
                    $(".pullUpLabel").text("上拉进行翻页...").show();
                    wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
                    $(".pullUp").removeClass("loading").show();
                    $(".loader").hide();
                    
                }, 1000);
                
            }
        }

　　

 $(function () {
            $("#onloadMore").hide();
            judgeIsPC();
            fillPage();//加载分页数据的方法       
            $("#onloadMore").click(function () {
                debugger;
                if ($(this).text() == "没有数据了...") {
                    return true;
                }
                fillPage();
            });
        });

　　

 function fillPage(callback) {
            
            var html = '';
            $.ajax({
                type: 'get',
                url: '/Admin/Ajax/Coupon.ashx',
                dataType: 'json',
                async: false,
                data: {
                    act: 'GetCouponPlanPage',
                    PageIndex: pageIndex ? pageIndex : 1,
                    PageSize: 5,
                    BeginDate: 0,
                    EndDate: 0,
                    ShopID: '<%=_AdminUserInfo.ShopID%>',
                    Keyword: ''
                },
                success: function (result) {
                    if ((result == null || !result.success) || (result.data == null || result.data.length == 0)) {
                        if (!isPC) {
                            $(".pullUpLabel").text("没有更多数据了...").show();
                            $(".pullUp").removeClass("loading").show();
                            $(".loader").hide();
                            wrapper.refresh();
                        } else {
                            $("#onloadMore").text("没有数据了...").show();
                        }
                        return;
                    }
                    if (result && result.success && result.data) {
                        var couponList = result.data;
                        pageIndex++;
                        for(let i=0;i<couponList.length;i++){
                            html+='<div class="couponItem">';  
                            html+=' <div class="row">';
                            html+=' <span class="partTitle">名称：</span>';
                            html+=' <span>'+couponList[i].Name+'</span>';
                            html+=' </div>';
                            html+='<div class="row">';
                            html += ' <span class="partTitle">参与商品：</span>';
                            html += '<div style="display:inline-block;77%">';
                            html += '<span class="oneElem" style="100%">' + couponList[i].GoodsNames + '</span>';
                            html += '</div>';
                            html+=' </div>';
                            html+=' <div class="row">';
                            html += ' <span class="partTitle">参与设备：</span>';
                            html += '<div style="display:inline-block;77%">';
                            html += '<span class="oneElem" style="100%">' + couponList[i].MachineIDs + '</span>';
                            html += '</div>';
                            html+='</div>';
                            html+=' <div class="row">';
                            html += '<span class="partTitle">参与群体：</span>';                            
                            html += '<span>' + transformUsertype(couponList[i].UserType) + '</span>';
                            html+='</div>';
                            html+='<div class="row">';
                            html+=' <span class="partTitle">领取限制：</span>';
                            html += '<span>' + couponList[i].CycleDay + "天最多领取" + couponList[i].ReceiveCount +"个" + '</span>';
                            html+='</div>';
                            html+='<div class="row">';
                            html+='<span class="partTitle">有效期限：</span>';
                            html+='<span>'+couponList[i].CreateDate+" - "+couponList[i].EndDate+'</span>';
                            html+='</div>';
                            html+='<div class="plainRow">';
                            html+='<span class="partTitle">临期规则：</span>';
                            for (let j = 0; j < couponList[i].PlanList.length; j++) {
                                var plan = couponList[i].PlanList[j];
                              var style =  j == 0 ? '' : 'style = "margin-left:70px;"';
                              html += '<div class="plain" ' + style + '>临期' + plan.DateSpan + "天," + (plan.Amount == 0 ? ("享受" + plan.Discount + "折") : ("一律" + plan.Amount + "元")) + '</div>';
                            }
                            html+=' </div>';
                            html+='<div class="row editButtons">';
                            html += ' <input type="button" value="编辑" onclick="editCoupon(this)" data-id="' + couponList[i].CouponPlanID + '" class="button-solid edit_button"/>';
                            html += '<input type="button" class="button-white edit_button" onclick="deleteCoupon(this)" data-id="' + couponList[i].CouponPlanID + '" value="删除" />';
                            html+='</div>';
                            html+='<div class="sspace2"></div>';
                            html += '</div>';
                        }
                        if (!isPC) $(".pullUpLabel").text("上拉进行翻页...").show();
                        else $("#onloadMore").text("点击加载更多...").show();
                        if (callback != undefined) callback();
                    } 
                }, error: function (result) {
                    //layer.msg((result && result.message) ? result.message : '请稍后重试');
                    if (!isPC) $(".pullUpLabel").text("没有更多数据了...").show();
                    else $("#onloadMore").text("没有数据了...").show();
                }
            });
            $('.couponList').append(html);
        }
       
        function Load() {  //下拉要加载的代码             
            var el, li, i;
            el = document.querySelector("#wrapper div");
            fillPage(function () {
                // debugger;
                wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
                if (!isPC) {
                    $(".pullUp").removeClass("loading").show();
                    $(".loader").hide();
                }
            });

        }
        function Refresh() {  //上拉要执行的代码
            setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector("#wrapper div");
                el.innerHTML = '';
                wrapper.refresh();/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
                location.reload();

            }, 1000);

        }

　　补充css,只显示一行超出的部分显示...

 .oneElem{
             *display:inline-block;*
             word-break: break-all;
             display: -webkit-box;
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
             /*border-bottom:1px #DDD solid;*/
        }