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

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

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

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

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

父view:messages.html

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

子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点击加载,下拉刷新,上下整合代码的更多相关文章

  1. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  2. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  3. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  4. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  5. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  6. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  7. MUI上拉加载下拉刷新

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

  9. 移动端上拉加载下拉刷新插件-mescroll.js插件

    官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...

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

随机推荐

  1. metasploit魔鬼训练营 (安全漏洞生命周期)

    1,前期 渗透测试工程师在挖掘0day的出来的 2,前中期 在一个密封的团体里,互相交流,利用漏洞带来的价值和,金钱 3,中期 安全漏洞被披露!!黑客们快速掌握该漏洞 4,中后期 漏洞被制作成更为简单 ...

  2. linux下,文件的权限和数字对应关系详解

    命令 chmod ABC file 其中A.B.C各为一个数字,分别表示User.Group.及Other的权限. A.B.C这三个数字如果各自转换成由"0"."1&qu ...

  3. [51nod1310]Chandrima and XOR

    有这样一个小到大排列的无穷序列S:1, 2, 4, 5, 8......,其中任何一个数转为2进制不包括2个连续的1.给出一个长度为N的正整数数组A,A1, A2......An记录的是下标(下标从1 ...

  4. [51nod1610]路径计数

    路径上所有边权的最大公约数定义为一条路径的值. 给定一个有向无环图. T次修改操作,每次修改一条边的边权,每次修改后输出有向无环图上路径的值为1的路径数量(对1,000,000,007取模). Inp ...

  5. 洛谷 P1219 八皇后【经典DFS,温习搜索】

    P1219 八皇后 题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序 ...

  6. CodeForces-2015 HIAST Collegiate Programming Contest-Gym-100952A-Who is the winner?

    A. Who is the winner? time limit per test 1 second memory limit per test 64 megabytes input standard ...

  7. js随机产生区间数

    function selectFrom(startNumber, endNumber) { //1.从几开始 2.到几结束 var choice = endNumber - startNumber + ...

  8. load和DOMContenLoaded的区别

    load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行,但他们执行的时间点是不一样的. DOM文档加载步骤: (1)解析html结构 (2)加载外部脚本和样式表文件 (3)解 ...

  9. 跟我一起读postgresql源码(十三)——Executor(查询执行模块之——Join节点(上))

    Join节点 JOIN节点有以下三种: T_NestLoopState, T_MergeJoinState, T_HashJoinState, 连接类型节点对应于关系代数中的连接操作,PostgreS ...

  10. win10安装配置jdk的环境变量

    换了个硬盘,用上了win10,发现win10安装好jdk之后,配置环境变量这个相对于win7和xp还是有那么一丢丢区别的,趁着夜色,随笔一记. 1.安装jdk之后,或者也可以用之前安装好的文件夹,先记 ...