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

Posted 2020-10-16 柠檬青味

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

一、引入文件

<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>
<script type="text/javascript" src="Content/jqueryweui/swiper.js"></script>	
<script type="text/javascript" src="Content/jqueryweui/city-picker.js" ></script>

二、页面布局

<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部分

   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();
            }
        });
    }