jQuery WeUI 组件下拉刷新和滚动加载的实现

最近在做手机版使用到了下拉刷新和滚动加载，记录一下实现过程：

一、引入文件

?

1 2 3 4

<link rel="stylesheet" href="Content/jqueryweui/weui.min.css"> <link rel="stylesheet" href="Content/jqueryweui/jquery-weui.min.css"> <script type="text/javascript" src="Content/jqueryweui/jquery.min.js" ></script> <script type="text/javascript" src="Content/jqueryweui/jquery-weui.min.js"></script>

二、页面布局

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div class="content" style="background-color: #FFFFFF; width: 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;">   <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1">         <!--下拉刷新-->         <div class="weui-pull-to-refresh__layer" style="padding: 5px;">             <div class="weui-pull-to-refresh__arrow"></div>             <div class="weui-pull-to-refresh__preloader"></div>             <div class="down">下拉刷新</div>             <div class="up">释放刷新</div>             <div class="refresh">正在刷新</div>         </div>         <div class="weui-form-preview" id="Tolist">            <!--内容展示区域-->         </div>         <div class="weui-loadmore" style="padding-bottom:30px;height:20px">             <i class="weui-loading"></i>             <span class="weui-loadmore__tips">正在加载</span>         </div>     </div> </div>

三、js部分

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

var pages = 1;    var sizes = 4;    var loading = false;  //状态标记    $(function () {        loadlist();    })  //=========================下拉刷新    $("#listwrap").pullToRefresh().on("pull-to-refresh", function () {        setTimeout(function () {            pages = 1;            $("#Tolist").html("");            loadlist();            if (loading) loading = false;            $("#listwrap").pullToRefreshDone(); // 重置下拉刷新        }, 1500);   //模拟延迟    });    //============================滚动加载    $("#listwrap").infinite().on("infinite", function () {        if (loading) return;        loading = true;        pages++; //页数        $('.weui-loadmore').show();        setTimeout(function () {            loadlist();            loading = false;        }, 2500);   //模拟延迟    }); // =======加载数据loadlist();   function loadlist() {        var html = "";        $.ajax({            type: "POST",            url: "/Index/Index",            data: { 'page': pages, 'size': sizes },            dataType: "json",            error: function (request) {                $(".weui-loadmore").hide();                         html += "<div class=\"weui-cells__title\" >已无更多数据</div>";                $("#Tolist").append(html);            },            success: function (data) {                if (data.List.length > 0) {                    for (var i = 0; i < data.List.length; i++) {                        html += ' <div class="weui-form-preview__bd"> ';                        html += ' <div class="weui-form-preview__item"> ';                        html += ' <label class="weui-form-preview__label">' + data.List[i].Name + '</label> ';                        html += ' </div> ';                        html += ' </div> ';                    }                    $("#Tolist").append(html);                }                else {                    html += "<div class=\"weui-cells__title\" >已无更多数据</div>";                    $("#Tolist").append(html);                    loading = true;                }                $(".weui-loadmore").hide();            }        });    }