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

一、引入文件

"stylesheet" href="Content/jqueryweui/weui.min.css">
 
"stylesheet" href="Content/jqueryweui/jquery-weui.min.css">
 

 
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;">
 
  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">
 
        
 
        class="weui-pull-to-refresh__layer" style="padding: 5px;">
 
            class="weui-pull-to-refresh__arrow">
            class="weui-pull-to-refresh__preloader">
            class="down">下拉刷新
            class="up">释放刷新
            class="refresh">正在刷新
        
        class="weui-form-preview" id="Tolist">                     
        class="weui-loadmore" style="padding-bottom:30px;height:20px">             class="weui-loading">             class="weui-loadmore__tips">正在加载         
    

三、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 += "
已无更多数据
";                $("#Tolist").append(html);            },            success: function (data) {                if (data.List.length > 0) {                    for (var i = 0; i < data.List.length; i++) {                        html += '
';                        html += '
';                        html += ' ' + data.List[i].Name + ' ';                        html += '
';                        html += '
';                    }                    $("#Tolist").append(html);                }                else {                    html += "
已无更多数据
";                    $("#Tolist").append(html);                    loading true;                }                $(".weui-loadmore").hide();            }        });    }

注意:如果布局没有做好,滚动条的位置放的不对,在浏览信息了数条之后想往回滑动的时候即使你没有下拉也会自动触发到下拉刷新,这是一个小坑,这个问题只要在#listwrap层设置滚动条 ,所以我在#listwrap层加了一些样式style=“height:100%; overflow:auto;”

 

这是从别人那里拿来的文章,地址:https://blog.csdn.net/pathsign/article/details/85257081

你可能感兴趣的:(jQuery WeUI 组件下拉刷新和滚动加载的实现)