mescroll-案例源码

scroll
字数统计: 3.4k   |   阅读时长≈ 19 分钟

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-2023 翟天野

请我喝杯咖啡吧~