最近在做手機(jī)版使用到了下拉刷新和滾動(dòng)加載，記錄一下實(shí)現(xiàn)過程：

一、引入文件

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=" 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"> ???????????<!--內(nèi)容展示區(qū)域--> ????????</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;??//狀態(tài)標(biāo)記 ???$(function () { ???????loadlist(); ???}) ?//=========================下拉刷新 ???$("#listwrap").pullToRefresh().on("pull-to-refresh", function () { ???????setTimeout(function () { ???????????pages = 1; ???????????$("#Tolist").html(""); ???????????loadlist(); ???????????if?(loading) loading =?false; ???????????$("#listwrap").pullToRefreshDone();?// 重置下拉刷新 ???????}, 1500);???//模擬延遲 ???}); ???//============================滾動(dòng)加載 ???$("#listwrap").infinite().on("infinite", function () { ???????if?(loading)?return; ???????loading =?true; ???????pages++;?//頁數(shù) ???????$('.weui-loadmore').show(); ???????setTimeout(function () { ???????????loadlist(); ???????????loading =?false; ???????}, 2500);???//模擬延遲 ???}); // =======加載數(shù)據(jù)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\" >已無更多數(shù)據(jù)</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\" >已無更多數(shù)據(jù)</div>"; ???????????????????$("#Tolist").append(html); ???????????????????loading =?true; ???????????????} ???????????????$(".weui-loadmore").hide(); ???????????} ???????}); ???}

?

?

?

?

?

?

?

?城別.筆

轉(zhuǎn)載于:https://www.cnblogs.com/sangwl/p/8830990.html

總結(jié)

以上是生活随笔為你收集整理的【下拉刷新】WEUI下拉刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。