mui点击加载,下拉刷新,上下整合代码

Posted 六娃的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mui点击加载,下拉刷新,上下整合代码相关的知识,希望对你有一定的参考价值。

mui点击加载,下拉刷新,上下整合代码

mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些

代码应该是有些问题的,测到了大家就自己改下。

 

首先要说明的是,有下拉刷新的页面一定要是双webview形式

不然就会出现下拉把上一个窗口的页面给拉出来的情况

父view:messages.html


 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <head>
 5         <meta charset="utf-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         <title>消息</title>
 8         <script src="../js/rem.js"></script>
 9         <link href="../css/mui.min.css" rel="stylesheet" />
10         <link rel="stylesheet" type="text/css" href="../css/style.css" />
11         <link rel="stylesheet" type="text/css" href="../css/page.css"/>
12         <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
13     </head>
14 </head>
15 <body style="background: #fff;">
16         <header class="mui-bar mui-bar-nav">
17             <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
18             <h1 class="mui-title">消息</h1>
19         </header>
20           <div class="mui-content">
21           </div>    
22 </body>
23 <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
24 <script src="../js/mui.min.js"></script>
25 <script type="text/javascript" src="../js/benben.js" ></script>
26 <script type="text/javascript" src="../js/suyuan.js" ></script>
27 <script type="text/javascript" src="../js/common.js"></script>
28 <script>
29     //启用双击监听
30         mui.init({
31             gestureConfig:{
32                 doubletap:true
33             },
34             subpages:[{
35                 url:‘messages2.html‘,
36                 id:‘messages2.html‘,
37                 styles:{
38                     top: ‘48px‘,
39                     bottom: ‘0px‘,
40                 }
41             }]
42         });
43         var contentWebview = null;
44         document.querySelector(‘header‘).addEventListener(‘doubletap‘,function () {
45             if(contentWebview==null){
46                 contentWebview = plus.webview.currentWebview().children()[0];
47             }
48             contentWebview.evalJS("mui(‘#pullrefresh‘).pullRefresh().scrollTo(0,0,100)");
49         });
50 </script>
51 
52 </html>

 

 

子webview:messages2.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <head>
  5         <meta charset="utf-8">
  6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7         <title>消息</title>
  8         <script src="../js/rem.js"></script>
  9         <link href="../css/mui.min.css" rel="stylesheet" />
 10         <link rel="stylesheet" type="text/css" href="../css/style.css" />
 11         <link rel="stylesheet" type="text/css" href="../css/page.css"/>
 12         <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
 13     </head>
 14 </head>
 15 <body style="background: #fff;">
 16         <div class="mui-loading" id="loading">
 17             <div class="mui-spinner">
 18     
 19             </div>
 20         </div>
 21           <div id="pullrefresh" class="mui-content" style="padding-bottom: 0;background: #fff;display: none;">
 22               <div class="message">
 23                   <ul id="messagesList">
 24                       
 25                   </ul>
 26                      <div class="mui-text-center">
 27                    </div>
 28                    
 29                    <div class="mui-text-center">
 30                        <div class="loadMore">
 31                            点击加载更多
 32                        </div>           
 33                 </div>
 34               </div>
 35           </div> 
 36            
 37 </body>
 38 <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
 39 <script src="../js/mui.min.js"></script>
 40 <script type="text/javascript" src="../js/benben.js" ></script>
 41 <script type="text/javascript" src="../js/suyuan.js" ></script>
 42 <script type="text/javascript" src="../js/common.js"></script>
 43 <script>
 44     $(function(){    
 45         var message_list =$(‘.message‘);
 46         message_list.on(‘tap‘,‘li‘,function(e){
 47             if($(this).hasClass(‘on‘)){
 48                 $(this).removeClass(‘on‘).find(‘.popover_article‘).hide();
 49                 
 50                 return false;
 51             }    
 52             message_list.find(‘li‘).removeClass(‘on‘);
 53             message_list.find(‘.popover_article‘).hide();
 54             $(this).addClass(‘on‘).find(‘.popover_article‘).show();
 55     
 56         })    
 57     });
 58     
 59     ca.init();
 60     
 61     mui.init({
 62     pullRefresh: {
 63         container: ‘#pullrefresh‘,
 64         down: {//下拉刷新
 65             contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
 66             contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
 67             contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
 68             callback: pulldownRefresh
 69         }
 70 
 71     }
 72 });
 73     setTimeout(function() {
 74         $(‘#loading‘).css(‘display‘,‘none‘);
 75         $(‘#pullrefresh‘).css(‘display‘,‘block‘);
 76     }, 800);
 77 //点击加载
 78     ca.click(ca.className(‘loadMore‘)[0],function(){
 79         if($(‘.loadMore‘).text() == ‘点击加载更多‘){
 80             var loadStr  =  ‘‘;
 81             
 82             loadStr += ‘<div class="mui-loading" id="loading">‘;
 83             loadStr += ‘<div class="mui-spinner"></div></div>‘;
 84             $(‘.loadMore‘).html(loadStr);
 85             setTimeout(function(){
 86                 $(‘.loadMore‘).html(‘点击加载更多‘);
 87             },500);
 88             pullupRefresh();    
 89         }
 90     })
 91   /*
 92    * 下拉刷新具体业务实现
 93    */
 94  function pulldownRefresh() {
 95     setTimeout(function() {
 96         pageIndex = 1;//刷新并显示第一页
 97         type=1;//代表下拉刷新
 98         getMessages(type);//具体取数据的方法
 99     }, 500);
100 }
101  
102     var pageIndex    =  0;
103     pullupRefresh();
104     function pullupRefresh() {
105         console.log(111);
106         setTimeout(function() {
107             pageIndex++;//翻下一页
108             type=2;//代表上拉加载
109             getMessages(type);//具体取数据的方法
110         }, 500);
111     }
112     function getMessages(type){
113         ca.get({
114             url:suyuan.url+‘api/personal/notify/‘,
115             data:{
116                 pageIndex:pageIndex,
117             },
118             succFn:function(data){
119                 console.log(data);
120                 var data = JSON.parse(data);
121                 if(data.code == 1){
122                     //遍历数据
123                     var dataList  =  data.data;
124                     dataList  =  JSON.parse(dataList);
125                     var str = ‘‘;
126                     for(i in dataList){
127                         if(dataList.title != ‘‘ && dataList[i].content != null && dataList[i].content != undefined){
128                             str += ‘<li onclick="readed(‘+dataList[i].id+‘,this)">‘;
129                             str += ‘<div class="notice">‘;
130                             if(!dataList[i].read){
131                                 str += ‘<span class="unread"></span>‘;    
132                             }
133                             str += ‘<span class="iconfont icon-icon-tips"></span></div>‘;
134                             str += ‘<div class="msg_text">‘;
135                             str += ‘<h4>‘+dataList[i].title+‘</h4>‘;
136                             if(dataList[i].content == null || dataList[i].content == undefined){
137                                 dataList[i].content = ‘‘;
138                             }
139                             str += ‘<p>‘+dataList[i].content+‘</p>‘;
140                             str += ‘<span class="time">15:31</span></div>‘;
141                             str += ‘<div class="popover_article">‘+dataList[i].content;
142                             str += ‘</div></li>‘;
143                         }
144                     }
145                     if(type == 1){
146                         //下拉加载
147                         $(‘#messagesList‘).html(‘‘);
148                         $(‘#messagesList‘).append(str);
149                         mui.currentWebview.show(); //显示当前页面     
150                         mui(‘#pullrefresh‘).pullRefresh().endPulldown();
151                     }
152                       if(type==2){//上拉加载
153                         $(‘#messagesList‘).append(str);
154                         mui.currentWebview.show(); //显示当前页面
155                      }
156                       data.code = 2;
157                     if(data.code == 1){
158                         $(‘.loadMore‘).html(‘点击加载更多‘);
159                     } else {
160                         $(‘.loadMore‘).html(‘没有更多数据了‘);
161                         
162 //                        mui(‘#pullrefresh‘).pullRefresh().endPullupToRefresh(true);
163                     }
164                     mui.currentWebview.show(); //显示当前页面
165                     if(data.status!=1&&pageIndex==1){
166                         mui.currentWebview.show(); //显示当前页面
167                     }
168                         }else{
169                             $(‘.loadMore‘).html(‘没有更多数据了‘);
170                         }
171                     }    
172                 });
173         
174             }
175     if(mui.os.plus) {  
176         mui.plusReady(function() {  
177             setTimeout(function() { mui(‘#pullrefresh‘).pullRefresh().pullupLoading(); }, 800);  
178         });  
179     } else {  
180         mui.ready(function() {   
181             mui(‘#pullrefresh‘).pullRefresh().pullupLoading();   
182         });  
183     }  
184     
185     function readed(id,self){
186         $.ajax({
187             type:‘delete‘,
188             url:suyuan.url+‘api/personal/notify/‘+id,
189             contentType:‘application/json‘,
190             dataType:‘json‘,
191             success:function(data){
192                 if(data.code == 1){
193                     $(self).find(‘.unread‘).remove(‘.unread‘);
194                 }
195             },
196             error:function(e){
197                 console.log(e.status);
198             }
199         })
200     }
201 </script>
202 
203 </html>

 

代码根据自己的需要自己调整即可

以上是关于mui点击加载,下拉刷新,上下整合代码的主要内容,如果未能解决你的问题,请参考以下文章

MUI - 上拉刷新/下拉加载

MUI实现上拉刷新和下拉加载

MUI 之上滑刷新和下拉加载示例

使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。

iOS 下拉刷新和上拉加载更多效果原理

mui的下拉刷新和上拉加载