mui点击加载，下拉刷新，上下整合代码
mui的是上拉加载，但是老大说要做成点击加载，所以就改了一些
代码应该是有些问题的，测到了大家就自己改下。
首先要说明的是，有下拉刷新的页面一定要是双webview形式
不然就会出现下拉把上一个窗口的页面给拉出来的情况
父view：messages.html
代码语言：javascript复制子webview：messages2.html
代码语言：javascript复制 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>代码根据自己的需要自己调整即可
