mescroll-案例源码

listreports.html

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
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- necessary -->
<meta name="keywords" content="1,2,3">
<meta name="description" content=""> <!-- description -->
<meta name="renderer" content="webkit">
<title>报告列表</title> <!-- base -->
<link href="../../css/comm/base-m.css" rel="stylesheet">
<link href="../../css/comm/mescroll.min.css" rel="stylesheet">
<link href="../../css/bisserve/bisserve.css" rel="stylesheet">
<!--\[if lt IE 9\]> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.bootcss.com%2Fhtml5shiv%2F3.7.3%2Fhtml5shiv.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.bootcss.com%2Frespond.js%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <!\[endif\]--> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20*%20%7B%20-webkit-touch-callout%3Anone%3B%20-webkit-user-select%3Anone%3B%20-webkit-tap-highlight-color%3Atransparent%3B%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>

<body class="min-h-100s bg-F2F2F2">
<div class="clear pos-r">
<div class="clear h-50 z-99 select_munu">
<div class="clear pos-r bg-white">
<div class="clear col-xs-6 pl-0 pr-0 mt-10 mb-10 text-center bor bor-r bor-col-F2F2F2 line-h-30 f-14 f-w-600 sel-class"> 选择分类<img class="ml-5" src="../../img/listreports/pulldown.png" alt=""> </div>
<div class="clear col-xs-6 pl-0 pr-0 mt-10 mb-10 text-center bor bor-l bor-col-F2F2F2 line-h-30 f-14 f-w-600 sel-rank"> 选择排序<img class="ml-5" src="../../img/listreports/pulldown.png" alt=""> </div>
</div>
<div class="pos-a full-w t-50 line-h-50 bg-white z-99 bor bor-l-none bor-r-none bor-col-e1e1e1 dis-n sel-class-show"> 默认 最新 倒序 </div>
<div class="pos-a full-w t-50 line-h-50 bg-white z-99 bor bor-l-none bor-r-none bor-col-e1e1e1 dis-n sel-rank-show"> 默认 快速检测报告 深度检测报告 </div>
</div> <!-- 滑动区域 -->
<div id="mescroll" class="clear pos-r overflow-h bg-ddd mescroll">
<!--展示上拉加载的数据列表-->
<ul id="dataList" class="data-list"> </ul>
</div>
</div> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fjs%2Fcomm%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fjs%2Fcomm%2Fmescroll.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <!-- 模拟数据js后期可以删掉 --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fjs%2Freport%2Fpdlist1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22..%2F..%2Fjs%2Freport%2Flistreports.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>

</html>

listreports.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
$(document).ready(function() { /*报告列表日期选择按钮按下*/
$(".cal-sel").click(function() { $(".cal-sel").attr("src", "../../img/listreports/calendar-screening.png"); }) $(".sel-class").click(function() {
var selclassdis = $(".sel-class-show").css('display');
var selrankdis = $(".sel-rank-show").css('display');
if (selrankdis == 'none') {
if (selclassdis == 'none') {
$(".sel-class").find("img").attr("src", "../../img/listreports/pullup.png");
$(".sel-class-show").slideDown();
} else {
$(".sel-class").find("img").attr("src", "../../img/listreports/pulldown.png");
$(".sel-class-show").slideUp();
};
} else {
$(".sel-rank").find("img").attr("src", "../../img/listreports/pulldown.png");
$(".sel-rank-show").slideUp(300);
if (selclassdis == 'none') {
$(".sel-class").find("img").attr("src", "../../img/listreports/pullup.png");
$(".sel-class-show").slideDown();
} else {
$(".sel-class").find("img").attr("src", "../../img/listreports/pulldown.png");
$(".sel-class-show").slideUp();
};
};
}) $(".sel-class-show").find("p").click(function() {
$(".sel-class-show").find("p").removeClass("bg-white-sel");
$(this).addClass("bg-white-sel");
}) $(".sel-rank").click(function() {
var selclassdis = $(".sel-class-show").css('display');
var selrankdis = $(".sel-rank-show").css('display');
if (selclassdis == 'none') {
if (selrankdis == 'none') {
$(".sel-rank").find("img").attr("src", "../../img/listreports/pullup.png");
$(".sel-rank-show").slideDown();
} else {
$(".sel-rank").find("img").attr("src", "../../img/listreports/pulldown.png");
$(".sel-rank-show").slideUp();
};
} else {
$(".sel-class").find("img").attr("src", "../../img/listreports/pulldown.png");
$(".sel-class-show").slideUp(300);
if (selrankdis == 'none') {
$(".sel-rank").find("img").attr("src", "../../img/listreports/pullup.png");
$(".sel-rank-show").slideDown();
} else {
$(".sel-rank").find("img").attr("src", "../../img/listreports/pulldown.png");
$(".sel-rank-show").slideUp();
};
};
}) $(".sel-rank-show").find("p").click(function() {
$(".sel-rank-show").find("p").removeClass("bg-white-sel");
$(this).addClass("bg-white-sel");
})
}); /*滚动部分js*/ /*滚动部分的高度*/
$("body").height($(document).height());
var wrapperheight = $(document).height() - $(".select_munu").height();
$("#mescroll").css("height", wrapperheight);
$(document).ready(function() {
$(function() {
var mescroll = new MeScroll("mescroll", {
up: {
page: { size: 8 }, //每次加载1条数据,模拟
loadFull loadFull: {
use: true, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
},
clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
callback: getListData, //上拉回调,此处可简写; 相当于
callback: function(page) { getListData(page); }
}
}); /*联网加载列表数据 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function getListData(page) { //联网加载数据
console.log("page.num==" + page.num);
getListDataFromNet(page.num, page.size, function(data) { //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endSuccess(data.length); //传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据; //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
setListData(data);
}, function() { //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
} /*设置列表数据*/
function setListData(data) { var listDom = document.getElementById("dataList"); for (var i = 0; i < data.length; i++) { var pd = data\[i\]; var str = "";
str += " <li class=\\"
clear mg - 10 radius - 10 bg - white pt - 20 pb - 15\\ ">";
str += " <div class=\\"
col - xs - 3 pl - 20 pr - 20\\ "> ";
str += " <img src=\\"
"+ pd.pdImg +"\\ " class=\\"
full - w\\ " alt=\\"\\
">";
str += " <\\/div>";
str += " <div class=\\"
col - xs - 9 pl - 15 pr - 0\\ "> ";
str += " ";
str += " " + pd.pdName + "";
str += " <\\/p>";
str += " ";
str += " " + pd.pdTime + " <span class=\\"
"+ pd.pdCol +"
f - 14 pull - right dis - ib mr - 20\\ ">" + pd.pdstate + "<\\/span>";
str += " <\\/p>";
str += " <\\/div>";
str += "<\\/li>"; var liDom = document.createElement("li");
liDom.innerHTML = str;
listDom.appendChild(liDom); } } /*联网加载列表数据*/
function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) { //延时一秒,模拟联网
setTimeout(function() { //
$.ajax({ //
type: 'GET', //
url: 'xxx', //
url: 'xxx?num=' + pageNum + "&size=" + pageSize, //
dataType: 'json', //
success: function(data) {
var data = pdlist1; // 模拟数据: ../res/pdlist1.js //模拟分页数据
var listData = \ [\];
for (var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) { if (i == data.length) break;
listData.push(data\[i\]); } successCallback(listData); //
}, //
error: errorCallback //
});
}, 500)
} //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
document.ondragstart = function() { return false; }
});
});

pdlist1.js

1
var pdlist1 = [{ "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "1分钟快速监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-FF2E24", "pdstate": "未读" }, { "pdImg": "../../img/listreports/24reportsv1.png", "pdName": "2小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/24reportsv1.png", "pdName": "24小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-FF2E24", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "3小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "4小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "5小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-FF2E24", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "6小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "7小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "8小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-FF2E24", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "9小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "10小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "11小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "12小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "13小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-FF2E24", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "14小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "15小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "16小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "17小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "18小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "19小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }, { "pdImg": "../../img/listreports/15reportsv1.png", "pdName": "20小时深度监测报告", "pdTime": "2017/6/20 18:34:43", "pdCol": "col-E47A36", "pdstate": "报告生成中" }
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~