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

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

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