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 ...

随机推荐

python网络数据采集（伴奏曲）
这里是前章,我们做一下预备.之前太多事情没能写博客~.. (此博客只适合python3x,python2x请自行更改代码) 首先你要有bs4模块 windows下安装:pip3 ...
BZOJ 1968: [Ahoi2005]COMMON 约数研究(新生必做的水题)
1968: [Ahoi2005]COMMON 约数研究 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 2351 Solved: 1797 [Submi ...
教你如何解决Sublime Text 3使用中出现的中文乱码问题
Sublime Text 3 是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. 不过Sublime Package Control所提供的插件可以让Sub ...
从parcel.js打包出错，到拥抱nvm
去年年底发布的parcel.js在年底可谓是火了一把,短短一个多月的时间在GitHub热门排行榜上名列前茅.因其几乎零配置的易用性,相比Webpack的复杂配置收获了大量关注及好评,甚至有人预言未来大 ...
分布式计算框架学习笔记--hadoop工作原理
(hadoop安装方法:http://blog.csdn.net/wangjia55/article/details/53160679这里不再累述) hadoop是针对大数据设计的一个计算架构.如果你 ...
SQL的case when then else end语句的用法
SELECT a.managecom, a.subtype, count(*) loadsucc, sum(case when a.state in ('4', '5', '6', '7', '8' ...
[国嵌攻略][092][UDP网络程序设计]
server.c #include <sys/socket.h> #include <netinet/in.h> #include <strings.h> #inc ...
Winform 控件的入门级使用（一）
开始总结一下控件的基本用法,方便以后查阅. 一.Label Label 的使用频率很高,基本上也没有什么难度. #region Winform //label label.Text = "这 ...
.26-浅析webpack源码之事件流make(1)
compilation事件流中,依然只是针对细节步骤做事件流注入,代码流程如图: // apply => this-compilation // apply => compilation ...
PHP结合Ueditor并修改图片上传路径
投稿:hebedich 字体:[增加减小] 类型:转载时间:2016-10-16 我要评论使用ueditor编辑器,附件默认在ueditor/php/upload/, 但是大家的附件地址的默认路 ...

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

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

随机推荐

热门专题