WEUI下拉刷新(可用在Appcan下拉刷新)
Posted 城别
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WEUI下拉刷新(可用在Appcan下拉刷新)相关的知识,希望对你有一定的参考价值。
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程:
一、引入文件
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-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" > <!--内容展示区域--> </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 ; //状态标记 $(function () { loadlist(); }) //=========================下拉刷新 $( "#listwrap" ).pullToRefresh(). on ( "pull-to-refresh" , function () { setTimeout(function () { pages = 1; 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(); } }); } |
以上是关于WEUI下拉刷新(可用在Appcan下拉刷新)的主要内容,如果未能解决你的问题,请参考以下文章