最近使用MUI这个框架使用下拉刷新插件的时候，在电脑和苹果手机测试都没有问题，但是一上线却发现安卓打包成APP后无法使用的问题。针对这一问题，博主只想说大家在开发的过程中真的是没有认真官方的文档，官方文档这么说的：为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。
错误示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!DOCTYPE html>
<html>
<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>MUI下拉刷新</title>
<link href=
"../css/mui.css"
rel=
"stylesheet"
/>
</head>
<body>
<header
class
=
"mui-bar mui-bar-nav"
>
<a
class
=
"mui-action-back mui-icon mui-icon-left-nav mui-pull-left"
></a>
<h1
class
=
"mui-title"
>测试下拉刷新列表</h1>
</header>
<div
class
=
"mui-content"
>
<div id=
"pullrefresh"
class
=
"mui-content mui-scroll-wrapper"
>
<div
class
=
"mui-scroll"
>
<!--数据列表-->
<ul
class
=
"mui-table-view mui-table-view-chevron mt50"
>
<li
class
=
"mui-table-view-cell"
>
<a href=
"sp-upcoming-test-detail.html"
class
=
"mui-navigate-right"
>人员名称: monkey</a>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src=
"../js/mui.js"
></script>
<script type=
"text/javascript"
charset=
"utf-8"
>
mui.init({
pullRefresh: {
container:
'#pullrefresh'
,
down: {
callback: pulldownRefresh
},
up: {
contentrefresh:
'正在加载...'
,
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function
pulldownRefresh() {
setTimeout(
function
() {
var
table = document.body.querySelector(
'.mui-table-view'
);
var
cells = document.body.querySelectorAll(
'.mui-table-view-cell'
);
for
(
var
i = cells.length, len = i +
3
; i < len; i++) {
var
li = document.createElement(
'li'
);
li.className =
'mui-table-view-cell'
;
li.innerHTML =
'<a class="mui-navigate-right">人员名称: '
+ (i +
1
) +
'</a>'
;
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui(
'#pullrefresh'
).pullRefresh().endPulldownToRefresh();
//refresh completed
},
1500
);
}
var
count =
0
;
/**
* 上拉加载具体业务实现
*/
function
pullupRefresh() {
setTimeout(
function
() {
mui(
'#pullrefresh'
).pullRefresh().endPullupToRefresh((++count >
2
));
//参数为true代表没有更多数据了。
var
table = document.body.querySelector(
'.mui-table-view'
);
var
cells = document.body.querySelectorAll(
'.mui-table-view-cell'
);
for
(
var
i = cells.length, len = i +
5
; i < len; i++) {
var
li = document.createElement(
'li'
);
li.className =
'mui-table-view-cell'
;
li.innerHTML =
'<a class="mui-navigate-right">人员名称: monkey '
+ (i +
1
) +
'</a>'
;
table.appendChild(li);
}
},
1500
);
}
</script>
</html>
|
既然说这个是错误的例子，那自然就是下拉刷新不兼容安卓的，我们通过这个例子和大家说说为何不兼容。
官方的下拉刷新分为3种：
1.单webview下拉刷新
2.双webview下拉刷新
3.div模拟下拉刷新
在安卓使用的的是双webview下拉刷新，但是在电脑上面测试的时候，也就是没有在html5+的环境下测试的时候，是自动给你替换成了div模拟下拉刷新，所以在电脑上面可以看到下拉刷新效果，到了打包之后app里面之后，就启用了双webview下拉刷新的模式，但是没有按照双webview下拉刷新的模板去写，所以在app里面就失效了。（ios里面可以正常使用，因为ios流畅度较高，打包之后，并没有启用双webview下拉刷新的模式，用的还是div下拉刷新模式）。
但是可以对代码稍微修改一下即可，改成双webview下拉刷新规范的代码布局。
双webview下拉刷新分为2个页面：（主页面，子页面）
主页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>主页面</title>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
>
<link rel=
"stylesheet"
href=
"css/mui.min.css"
>
</head>
<body>
<header
class
=
"mui-bar mui-bar-nav"
>
<a
class
=
"mui-action-back mui-icon mui-icon-left-nav mui-pull-left"
></a>
<h1
class
=
"mui-title"
>测试列表</h1>
</header>
</body>
<script src=
"js/mui.min.js"
></script>
<script type=
"text/javascript"
>
mui.init({
subpages:[{
//调用子页面刷新的代码
url:
'子页面的地址'
,
//子页面的地址
id:
'子页面的id'
,
//子页面的id，可以自己根据需求随便设置
styles:{
top:
'45px'
,
//子页面距离顶部的距离
bottom:
'0px'
,
//子页面距离底部的距离
}
}]
});
</script>
</html>
|
子页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!DOCTYPE html>
<html>
<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>
<link href=
"css/mui.min.css"
rel=
"stylesheet"
/>
</head>
<body>
<div
class
=
"mui-content"
>
<div id=
"pullrefresh"
class
=
"mui-content mui-scroll-wrapper"
>
<div
class
=
"mui-scroll"
>
<!--数据列表-->
<ul
class
=
"mui-table-view mui-table-view-chevron mt50"
>
<li
class
=
"mui-table-view-cell"
>
<a href=
"sp-upcoming-test-detail.html"
class
=
"mui-navigate-right"
>人员名称: 张三</a>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src=
"js/mui.min.js"
></script>
<script type=
"text/javascript"
charset=
"utf-8"
>
mui.init({
pullRefresh: {
container:
'#pullrefresh'
,
down: {
callback: pulldownRefresh
},
up: {
contentrefresh:
'正在加载...'
,
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function
pulldownRefresh() {
setTimeout(
function
() {
var
table = document.body.querySelector(
'.mui-table-view'
);
var
cells = document.body.querySelectorAll(
'.mui-table-view-cell'
);
for
(
var
i = cells.length, len = i +
3
; i < len; i++) {
var
li = document.createElement(
'li'
);
li.className =
'mui-table-view-cell'
;
li.innerHTML =
'<a class="mui-navigate-right">人员名称: '
+ (i +
1
) +
'</a>'
;
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui(
'#pullrefresh'
).pullRefresh().endPulldownToRefresh();
//refresh completed
},
1500
);
}
var
count =
0
;
/**
* 上拉加载具体业务实现
*/
function
pullupRefresh() {
setTimeout(
function
() {
mui(
'#pullrefresh'
).pullRefresh().endPullupToRefresh((++count >
2
));
//参数为true代表没有更多数据了。
var
table = document.body.querySelector(
'.mui-table-view'
);
var
cells = document.body.querySelectorAll(
'.mui-table-view-cell'
);
for
(
var
i = cells.length, len = i +
5
; i < len; i++) {
var
li = document.createElement(
'li'
);
li.className =
'mui-table-view-cell'
;
li.innerHTML =
'<a class="mui-navigate-right">人员名称: 张三 '
+ (i +
1
) +
'</a>'
;
table.appendChild(li);
}
},
1500
);
}
</script>
</html>
|
这样就可以实现打包成安卓APP后下拉刷新无兼容问题