专栏首页胡六娃的博客mui点击加载,下拉刷新,上下整合代码

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

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

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

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

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

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

父view:messages.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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mui页面跳转(传值+接收)

    用户4973967
  • js 数组去重

    用户4973967
  • window下安装docker

    下载地址:最新版 Toolbox 下载地址: https://www.docker.com/get-docker

    用户4973967
  • jquery 操作DOM元素(1)

    .clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     ...

    用户1197315
  • jQuery DOM操作

    在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似

    bamboo
  • 【ES6基础】生成器(Generator)

    在这篇文章里《【ES6基础】迭代器(iterator)》,笔者介绍了迭代器及相关实例,我们要实现一个迭代器要写不少的代码。幸运的是,ES6引入了一个新的函数类型...

    前端达人
  • 前端开发知识汇总--JS

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • 北大陈宝权课题组SIGGRAPH 19:多机器人协同三维场景重建

    从机器人领域的移动导航、动作规划和物体抓取等经典问题,到虚拟现实、增强现实和混合现实等图形技术,都离不开对真实场景的三维建模。

    新智元
  • 如何优雅地屏蔽掉Google搜索结果中视频、新闻、图片等结果

    本人在使用Google搜索的时候,经常发现一些相关性的YouTube视频还有Google自家产品的搜索结果出现,在使用了脚本优化之后,十分不美观。在看了Adbl...

    八音弦
  • 【ES6基础】生成器(Generator)

    生成器第一次出现在CLU语言中。CLU语言是美国麻省理工大学的Barbara Liskov教授和她的学生们在1974年至1975年间所设计和开发出来的。Pyth...

    前端达人

扫码关注云+社区

领取腾讯云代金券