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

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

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

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

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

父view：messages.html

 <!DOCTYPE html>

 <html>

 <head>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <title>消息</title>

         <script src="../js/rem.js"></script>

         <link href="../css/mui.min.css" rel="stylesheet" />

         <link rel="stylesheet" type="text/css" href="../css/style.css" />

         <link rel="stylesheet" type="text/css" href="../css/page.css"/>

         <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />

     </head>

 </head>

 <body style="background: #fff;">

         <header class="mui-bar mui-bar-nav">

             <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>

             <h1 class="mui-title">消息</h1>

         </header>

           <div class="mui-content">

           </div>

 </body>

 <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>

 <script src="../js/mui.min.js"></script>

 <script type="text/javascript" src="../js/benben.js" ></script>

 <script type="text/javascript" src="../js/suyuan.js" ></script>

 <script type="text/javascript" src="../js/common.js"></script>

 <script>

     //启用双击监听

         mui.init({

             gestureConfig:{

                 doubletap:true

             },

             subpages:[{

                 url:'messages2.html',

                 id:'messages2.html',

                 styles:{

                     top: '48px',

                     bottom: '0px',

                 }

             }]

         });

         var contentWebview = null;

         document.querySelector('header').addEventListener('doubletap',function () {

             if(contentWebview==null){

                 contentWebview = plus.webview.currentWebview().children()[0];

             }

             contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");

         });

 </script>

 </html>

子webview：messages2.html

 <!DOCTYPE html>

 <html>

 <head>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <title>消息</title>

         <script src="../js/rem.js"></script>

         <link href="../css/mui.min.css" rel="stylesheet" />

         <link rel="stylesheet" type="text/css" href="../css/style.css" />

         <link rel="stylesheet" type="text/css" href="../css/page.css"/>

         <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />

     </head>

 </head>

 <body style="background: #fff;">

         <div class="mui-loading" id="loading">

             <div class="mui-spinner">

             </div>

         </div>

           <div id="pullrefresh" class="mui-content" style="padding-bottom: 0;background: #fff;display: none;">

               <div class="message">

                   <ul id="messagesList">

                   </ul>

                      <div class="mui-text-center">

                    </div>

                    <div class="mui-text-center">

                        <div class="loadMore">

                            点击加载更多

                        </div>

                 </div>

               </div>

           </div> 

 </body>

 <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>

 <script src="../js/mui.min.js"></script>

 <script type="text/javascript" src="../js/benben.js" ></script>

 <script type="text/javascript" src="../js/suyuan.js" ></script>

 <script type="text/javascript" src="../js/common.js"></script>

 <script>

     $(function(){

         var message_list =$('.message');

         message_list.on('tap','li',function(e){

             if($(this).hasClass('on')){

                 $(this).removeClass('on').find('.popover_article').hide();

                 return false;

             }

             message_list.find('li').removeClass('on');

             message_list.find('.popover_article').hide();

             $(this).addClass('on').find('.popover_article').show();

         })

     });

     ca.init();

     mui.init({

     pullRefresh: {

         container: '#pullrefresh',

         down: {//下拉刷新

             contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容

             contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容

             contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容

             callback: pulldownRefresh

         }

     }

 });

     setTimeout(function() {

         $('#loading').css('display','none');

         $('#pullrefresh').css('display','block');

     }, 800);

 //点击加载

     ca.click(ca.className('loadMore')[0],function(){

         if($('.loadMore').text() == '点击加载更多'){

             var loadStr  =  '';

             loadStr += '<div class="mui-loading" id="loading">';

             loadStr += '<div class="mui-spinner"></div></div>';

             $('.loadMore').html(loadStr);

             setTimeout(function(){

                 $('.loadMore').html('点击加载更多');

             },500);

             pullupRefresh();

         }

     })

   /*

    * 下拉刷新具体业务实现

    */

  function pulldownRefresh() {

     setTimeout(function() {

         pageIndex = 1;//刷新并显示第一页

         type=1;//代表下拉刷新

         getMessages(type);//具体取数据的方法

     }, 500);

 }

     var pageIndex    =  0;

     pullupRefresh();

     function pullupRefresh() {

         console.log(111);

         setTimeout(function() {

             pageIndex++;//翻下一页

             type=2;//代表上拉加载

             getMessages(type);//具体取数据的方法

         }, 500);

     }

     function getMessages(type){

         ca.get({

             url:suyuan.url+'api/personal/notify/',

             data:{

                 pageIndex:pageIndex,

             },

             succFn:function(data){

                 console.log(data);

                 var data = JSON.parse(data);

                 if(data.code == 1){

                     //遍历数据

                     var dataList  =  data.data;

                     dataList  =  JSON.parse(dataList);

                     var str = '';

                     for(i in dataList){

                         if(dataList.title != '' && dataList[i].content != null && dataList[i].content != undefined){

                             str += '<li onclick="readed('+dataList[i].id+',this)">';

                             str += '<div class="notice">';

                             if(!dataList[i].read){

                                 str += '<span class="unread"></span>';

                             }

                             str += '<span class="iconfont icon-icon-tips"></span></div>';

                             str += '<div class="msg_text">';

                             str += '<h4>'+dataList[i].title+'</h4>';

                             if(dataList[i].content == null || dataList[i].content == undefined){

                                 dataList[i].content = '';

                             }

                             str += '<p>'+dataList[i].content+'</p>';

                             str += '<span class="time">15:31</span></div>';

                             str += '<div class="popover_article">'+dataList[i].content;

                             str += '</div></li>';

                         }

                     }

                     if(type == 1){

                         //下拉加载

                         $('#messagesList').html('');

                         $('#messagesList').append(str);

                         mui.currentWebview.show(); //显示当前页面

                         mui('#pullrefresh').pullRefresh().endPulldown();

                     }

                       if(type==2){//上拉加载

                         $('#messagesList').append(str);

                         mui.currentWebview.show(); //显示当前页面

                      }

                       data.code = 2;

                     if(data.code == 1){

                         $('.loadMore').html('点击加载更多');

                     } else {

                         $('.loadMore').html('没有更多数据了');

 //                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);

                     }

                     mui.currentWebview.show(); //显示当前页面

                     if(data.status!=1&&pageIndex==1){

                         mui.currentWebview.show(); //显示当前页面

                     }

                         }else{

                             $('.loadMore').html('没有更多数据了');

                         }

                     }

                 });

             }

     if(mui.os.plus) {

         mui.plusReady(function() {

             setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 800);

         });

     } else {

         mui.ready(function() {

             mui('#pullrefresh').pullRefresh().pullupLoading();

         });

     }  

     function readed(id,self){

         $.ajax({

             type:'delete',

             url:suyuan.url+'api/personal/notify/'+id,

             contentType:'application/json',

             dataType:'json',

             success:function(data){

                 if(data.code == 1){

                     $(self).find('.unread').remove('.unread');

                 }

             },

             error:function(e){

                 console.log(e.status);

             }

         })

     }

 </script>

 </html>

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

mui点击加载，下拉刷新，上下整合代码的更多相关文章

mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
APICloud上啦加载下拉刷新模块
apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...
微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
MUI上拉加载下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
利用iscroll实现上拉加载下拉刷新
1.首先引用isScroll插件说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...
移动端上拉加载下拉刷新插件-mescroll.js插件
官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...
MJRefresh(上拉加载下拉刷新)
整理自:https://github.com/CoderMJLee/MJRefresh#%E6%94%AF%E6%8C%81%E5%93%AA%E4%BA%9B%E6%8E%A7%E4%BB%B6%E ...

随机推荐

oracle ebs form开发总结
item的布局千万不要去乱动,只要调好长宽和y轴的坐标就好了.form内部集成了很多代码对布局进行动态的调整,而且有一些代码的长宽什么的还是写死了的,我们一动,form可能就识别不了了,然后就显示出来 ...
div排版+文档流+定位秘诀
由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 ...
SSH私用私钥登陆
1.导入私钥,将私钥文件放到当前登陆用户目录下的.ssh目录下 2.指定私钥登陆,ssh -i .ssh/ssh_rsa root@target.com 如果出现了下面这种情况这是因为私钥文件权限 ...
除了四大传统OA软件商，国内还有这些优秀的OA协同产品
国内OA 软件市场经过多年的发展,在产品.应用.服务方面都已相对成熟,也出现了众多优秀的OA软件品牌. 据中国软件协会2017年公布的数据显示:泛微OA.致远OA.华天动力OA.蓝凌OA的销售仍稳居O ...
使用django建博客时遇到的URLcon相关错误以及解决方法。错误提示：类型错误：include0获得一个意外的关键参数app_name
root@nanlyvm:/home/mydj/mysite# python manage.py runserver Performing system checks... Unhandled exc ...
Spark算子--foreach和foreachPartition
转载请标明出处http://www.cnblogs.com/haozhengfei/p/6776fe93f754daf60d00d2cb509422a1.html foreach和foreachPar ...
学习JVM-GC收集器
1. 前言在上一篇文章中,介绍了JVM中垃圾回收的原理和算法.介绍了通过引用计数和对象可达性分析的算法来筛选出已经没有使用的对象,然后介绍了垃圾收集器中使用的三种收集算法:标记-清除.标记-整理.标 ...
mysql中使用show table status 查看表信息
学习标签: mysql 本文导读:在使用mysql数据库时,经常需要对mysql进行维护,查询每个库.每个表的具体使用情况,Mysql数据库可以通过执行SHOW TABLE STATUS命令来获取每个 ...
如何更改Linux的ssh端口
1. 修改/etc/ssh/sshd_config里的Port字段 Port 22改为Port 1000(你自定义的端口) 2. 重启sshd服务 #service sshd restart
<c:forEach 的常用整理
<c:forEach items="${images}" var="img" varStatus="status"> <d ...

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

mui点击加载，下拉刷新，上下整合代码的更多相关文章

随机推荐

热门专题