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

随机推荐

java基础，集合，Arraylist，源码解析(基础)
ArrayList 是什么,定义? 这是动态的数组,它提供了动态的增加和减少元素,实现了List接口(List实现Collection,所以也实现Collection接口)灵活的设置数组的大小等好处 ...
2039: [2009国家集训队]employ人员雇佣
任意门 Description 作为一个富有经营头脑的富翁,小L决定从本国最优秀的经理中雇佣一些来经营自己的公司.这些经理相互之间合作有一个贡献指数,(我们用Ei,j表示i经理对j经理的了解程度),即 ...
微积分入门（"SX"T版）
哎,微积分,表示暂时并没有很深入的研究……虽然高中有教,但是好像跟小西瓜学的顺序不太一样,嗯……教微积分之前不应该把极限学下来么……不管了,本文按傻X腾的理解来搞吧. 极限……大学的东西喔,我们先来认 ...
AtCoder Beginner Contest 069【A，水，B，水，C，数学，D，暴力】
A - K-City Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement In K-city, ...
POJ3264-Balanced Lineup-线段树
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 53721 Accepted: 25244 ...
HDU1016 DFS+回溯（保存路径）
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
DOM解析原理示意
DOM解析原理示意
Python3 的序列
序列 1.根据列表.元组.字符串的共同点把它们统称为序列(他们都是兄弟呀) 1)都可以通过索引来的到每一个元素 2)默认索引值都是从零开始(Python也支持负数索引) 3)都可以通过分片(切片)的方 ...
JavaSE笔记-泛型
定义带泛型的类 public class Cat<T> { //可以用T定义实例变量 private T name; //可以用T定义形参 //构造器没有<> public C ...
C#进行CAD二次开发环境配置
最近被公司分配到了做CAD二次开发.也是初次接触这方面的东西,其实是有些无从下手的感觉.因为公司这边也没有人有时间带我,只能是自己看书,然后再写一些Demo,再结合实际的应用来一点点的学习.废话不多说 ...

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

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

随机推荐

热门专题