利用MUI实现下拉刷新

最新推荐文章于 2024-06-20 16:36:13 发布

black--berry

最新推荐文章于 2024-06-20 16:36:13 发布

阅读量2k

点赞数 1

分类专栏： html mui list 文章标签：上啦刷新下拉式刷新列表list

本文链接：https://blog.csdn.net/qq_37195300/article/details/78184059

版权

html 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

mui

6 篇文章 0 订阅

订阅专栏

list

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>

</html>
<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <title>List of agents</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   <link rel="stylesheet" type="text/css" href="../css/mui.css" />
   <link rel="stylesheet" type="text/css" href="../css/new_file.css" />

</head>

<body>
   <header class="mui-bar mui-bar-nav" style="background: #75a2ff;">
       
       <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"><span style="font-size: .8em;">返回</span></a>
       <h1 class="mui-title-h1">已办列表</h1>
   </header>
   
       <div id="pullrefresh"   class="mui-content mui-scroll-wrapper">
            <div   class="mui-scroll">
               
                   <ul class="mui-table-view">
                       <li class="mui-table-view-cell mui-media" id="list_li">
                           <a href="javascript:;" id="suggestion">
                               <img class="mui-media-object mui-pull-left" src="../images/todo-1.png">
                               <div class="mui-media-body" style=" margin-top: 2%;">
                                   某某某发起的总行用印申请
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">2017-8-30</span> <span class="mui-ellipsis-span">11:30</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p" style=" color: #7ea3e7;">人事部门审批通过</p>
                               </div>
                           </a>
                           <img src="../images/To-do-details/already.png" alt="" / class="alreaady">
                       </li>
                       <li class="mui-table-view-cell mui-media">
                           <a href="javascript:;" id="suggestion">
                               <img class="mui-media-object mui-pull-left" src="../images/todo-2.png">
                               <div class="mui-media-body" style=" margin-top: 2%;">
                                   某某某发起的总行用印申请
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">2017-8-30</span> <span class="mui-ellipsis-span">11:30</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p" style=" color: #7ea3e7;">人事部门审批通过</p>
                               </div>
                           </a>
                           <img src="../images/To-do-details/already.png" alt="" / class="alreaady">
                       </li>
                       <li class="mui-table-view-cell mui-media">
                           <a href="javascript:;" id="suggestion">
                               <img class="mui-media-object mui-pull-left" src="../images/todo-3.png">
                               <div class="mui-media-body" style=" margin-top: 2%;">
                                   某某某发起的总行用印申请
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">2017-8-30</span> <span class="mui-ellipsis-span">11:30</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p" style=" color: #7ea3e7;">人事部门审批通过</p>
                               </div>
                           </a>
                           <img src="../images/To-do-details/already.png" alt="" / class="alreaady">
                       </li>
                       <li class="mui-table-view-cell mui-media">
                           <a href="javascript:;" id="suggestion">
                               <img class="mui-media-object mui-pull-left" src="../images/todo-4.png">
                               <div class="mui-media-body" style=" margin-top: 2%;">
                                   某某某发起的总行用印申请
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">2017-8-30</span> <span class="mui-ellipsis-span">11:30</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p" style=" color: #7ea3e7;">人事部门审批通过</p>
                               </div>
                           </a>
                           <img src="../images/To-do-details/already.png" alt="" / class="alreaady">
                       </li>
                       <li class="mui-table-view-cell mui-media">
                           <a href="javascript:;" id="suggestion">
                               <img class="mui-media-object mui-pull-left" src="../images/todo-5.png">
                               <div class="mui-media-body" style=" margin-top: 2%;">
                                   某某某发起的总行用印申请
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">2017-8-30</span> <span class="mui-ellipsis-span">11:30</span></p>
                                   <p class="mui-ellipsis" id="mui-ellipsis-p" style=" color: #7ea3e7;">人事部门审批通过</p>
                               </div>
                           </a>
                           <img src="../images/To-do-details/already.png" alt="" / class="alreaady">
                       </li>
                   </ul>
               </div>
           </div>
       
       
       <script>
           var h5pullDown = true;
       </script>
       <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
       <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           mui.init({
               pullRefresh: {
                   container: '#pullrefresh',
                   down: { //下拉刷新
                       auto: true, //可选,默认false.自动下拉刷新一次
                       contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                       contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                       contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                       callback: pulldownRefresh
                   },
                   up: { //上拉加载
                       //auto:true,//可选,默认false.自动上拉加载一次
                       contentrefresh: '正在加载...',
                       contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                       callback: pullupRefresh
                   }
               }
           });
           (function($) {
               $(".mui-scroll-wrapper").scroll({
                   bounce: false, //滚动条是否有弹力默认是true
                   indicators: false, //是否显示滚动条,默认是true
                   deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
               });

           })(mui);
           // mui('.mui-scroll-wrapper').scroll();
           //      var slider = mui("#slider");
           //      slider.slider({
           //          interval: 1000
           //      });

           var catchmath;
           var pushset = 1;
           fGetData(pushset);

           function fGetData(pushset) { //请求数据
               var jsonStr = {
                   'cmd': 'workflow_searchDealWithListNew',
                   'domain': '0',
                   'title': '',
                   'pageSize': '' + pushset * 15 + '',
                   'userId': '65544',
                   'pageOffset': '0',
                   'workStatus': '101'
               };
               CommonAjax(jsonStr);
           };

           function workflow_searchDealWithListNew(jsonStr) {
               var jsonObject = JSON.parse(jsonStr);
               var page = jsonObject.output.data.dealedWorkFlow;
               var liList = '';
               mui.each(page, function(kk, dealedWorkFlow) {
                   liList += '<a href="javascript:;" id="suggestion"><img class="mui-media-object mui-pull-left" src="../images/todo-5.png"><div class="mui-media-body" style="margin-top: 2%; white-space: normal;word-break: break-all;overflow: hidden;">' + dealedWorkFlow.workTitle + '<p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p><p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">' + dealedWorkFlow.workSubmitTime + '</span></p><p class="mui-ellipsis" id="mui-ellipsis-p" style="color: #7ea3e7;">' + dealedWorkFlow.workSubmitPerson + '</p></div></a><img src="../images/To-do-details/already.png" alt="" class="alreaady" />';
               });
               document.getElementById("list_li").innerHTML = liList;
           }
           /**
           * 下拉刷新具体业务实现
           */
           function pulldownRefresh() {
               setTimeout(function() {
                   var table = document.body.querySelector('.mui-table-view');
                   var cells = document.body.querySelectorAll('.mui-table-view-cell');
                   //table.innerHTML='';//追加前先将原来的数据清除
                   pushset = pushset + 1;
                   var url = utils.getAddress();
                   var jsonStrll = {
                       'cmd': '222',
                       'domain': '0',
                       'title': '',
                       'pageSize': '' + pushset * 15 + '',
                       'userId': '65544',
                       'pageOffset': '0',
                       'workStatus': '101'
                   };
                   mui.ajax({
                       type: "POST",
                       url: url,
                       data: JSON.stringify(jsonStrll), //参数对象序列化成json字符串
                       async: true,
                       datatype: "json",
                       crossDomain: false,
                       processData: false, //禁用对data的序列化
                       timeout: 5000,
                       success: function(datass, status, xhr) {
                           var jsonObject = JSON.parse(datass);
                           if(jsonObject.output.message.result==1){//判断返回是否正确
                           var page = jsonObject.output.data.dealedWorkFlow;
                           mui.each(page, function(kk, dealedWorkFlow) {
                               //for(var i = cells.length, len = i + 15; i < len; i++) {
                               var li = document.createElement('li');
                               li.className = 'mui-table-view-cell';
                               li.innerHTML = '<a href="javascript:;" id="suggestion"><img class="mui-media-object mui-pull-left" src="../images/todo-5.png"><div class="mui-media-body" style="margin-top: 2%; white-space: normal;word-break: break-all;overflow: hidden;">' + dealedWorkFlow.workTitle + '<p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p><p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">' + dealedWorkFlow.workSubmitTime + '</span></p><p class="mui-ellipsis" id="mui-ellipsis-p" style="color: #7ea3e7;">' + dealedWorkFlow.workSubmitPerson + '</p></div></a><img src="../images/To-do-details/already.png" alt="" class="alreaady" />';
                               //下拉刷新，新纪录插到最前面；
                               table.insertBefore(li, table.firstChild);
                               //                           }
                           });
                           }
                       },
                       error: function(xhr, status, errorThrown) {
                                               if(status == 'timeout') {
                                                   mui.toast("请求超时");
                                               } else if(status == 'error') {
                                                   mui.toast("请求出错");
                                               } else if(status == 'abort') {
                                                   mui.toast("当前无网络");
                                               } else if(status == 'parsererror') {
                                                   mui.toast("解析错误");
                                               } else {
                                                   mui.toast("未知异常");
                                               }
                                           },
                   });
                   mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed //need
               }, 1500);
           };
           var count = 0;
           /**
           * 上拉加载具体业务实现
           */
           function pullupRefresh() {
               setTimeout(function() {
                   mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
                   var table = document.body.querySelector('.mui-table-view');
                   var cells = document.body.querySelectorAll('.mui-table-view-cell');
                   pushset = pushset + 1;
                   //               alert(pushset);
                   var url = utils.getAddress();
                   var jsonStrll = {
                       'cmd': 'workflow_searchDealWithListNew',
                       'domain': '0',
                       'title': '',
                       'pageSize': '' + pushset * 15 + '',
                       'userId': '65544',
                       'pageOffset': '0',
                       'workStatus': '101'
                   };
                   mui.ajax({
                       type: "POST",
                       url: url,
                       data: JSON.stringify(jsonStrll), //参数对象序列化成json字符串
                       async: true,
                       datatype: "json",
                       crossDomain: false,
                       processData: false, //禁用对data的序列化
                       timeout: 5000,
                       success: function(datass, status, xhr) {
                           var jsonObject = JSON.parse(datass);
                           var page = jsonObject.output.data.dealedWorkFlow;
                           mui.each(page, function(kk, dealedWorkFlow) {
                               var li = document.createElement('li');
                               li.className = 'mui-table-view-cell';
                               li.innerHTML = '<a href="javascript:;" id="suggestion"><img class="mui-media-object mui-pull-left" src="../images/todo-5.png"><div class="mui-media-body" style="margin-top: 2%; white-space: normal;word-break: break-all;overflow: hidden;">' + dealedWorkFlow.workTitle + '<p class="mui-ellipsis" id="mui-ellipsis-p">时间等级<span class="mui-ellipsis-span">一般</span></p><p class="mui-ellipsis" id="mui-ellipsis-p">发起时间<span class="mui-ellipsis-span">' + dealedWorkFlow.workSubmitTime + '</span></p><p class="mui-ellipsis" id="mui-ellipsis-p" style="color: #7ea3e7;">' + dealedWorkFlow.workSubmitPerson + '</p></div></a><img src="../images/To-do-details/already.png" alt="" class="alreaady" />';
                               table.appendChild(li);
                           });
                       },
                       error: function(xhr, status, errorThrown) {
                           if(status == 'timeout') {
                               mui.toast("请求超时");
                           } else if(status == 'error') {
                               mui.toast("请求出错");
                           } else if(status == 'abort') {
                               mui.toast("当前无网络");
                           } else if(status == 'parsererror') {
                               mui.toast("解析错误");
                           } else {
                               mui.toast("未知异常");
                           }
                       },
                   });
               }, 1000);
           }

           if(mui.os.plus) {
               mui.plusReady(function() {
                   setTimeout(function() {
                       mui('#pullrefresh').pullRefresh().pullupLoading();
                   }, 1000);

               });
           } else {
               mui.ready(function() {
                   mui('#pullrefresh').pullRefresh().pullupLoading();
               });
           }
       </script>
</body>

</html>