JQuery Weui Component Pull-down refresh and rolling load implementation

Recently in the mobile version of the use of the drop-down refresh and rolling load, record the implementation process:

I. Introduction of DOCUMENTS

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

Second, the page layout

<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 "> <!--Pull-up--<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 "> Dropdown refresh </div> <div class=" Up "> Release Refresh < /div> <div class= "Refresh" > Refreshing </div> </div> <div class= "Weui-form-previe W "id=" Tolist "> <!--content area--</div> <div class=" Weui-loadmore "style=" Padding-b ottom:30px;height:20px "> <i class=" Weui-loadinG "></i> <span class=" weui-loadmore__tips "> Loading </span> </div> </div>& Lt;/div>

Third, JS part

   var pages = 1;    var sizes = 4;  var loading = false;    Status token $ (function () {loadlist (); })//========================= the drop-down to refresh $ ("#listwrap"). Pulltorefresh (). On ("Pull-to-refresh", function () {Settimeou            T (function () {pages = 1;            $ ("#Tolist"). HTML ("");            Loadlist ();            if (loading) loading = false; $ ("#listwrap"). Pulltorefreshdone ();   Reset drop-down refresh}, 1500);    Analog delay});        ============================ Rolling Load $ ("#listwrap"). Infinite (). On ("Infinite", function () {if (loading) return;        Loading = true; pages++;        Pages $ ('. Weui-loadmore '). Show ();            SetTimeout (function () {loadlist ();        Loading = false;   }, 2500); Analog delay});   ======= Loading Data 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\ "> No more Data </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\ "> No more Data </div>"; $ ("#Tolist"). Append (HTML);                Loading = true;            } $ (". Weui-loadmore"). Hide ();    }        }); }

　　

　　

JQuery Weui Component Pull-down refresh and rolling load implementation