使用mui实现上拉加载，在浏览器中没有问题，但是打包apk在android手机上运行时，加载的内容第一条数据有一部分显示为空白，但是继续下拉加载之后，又显示正常了。只有第一次加载后显示空白。
<!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" />
<style type="text/css">
.invest-title {
border-bottom: 1px solid #CCCCCC;
font-size: 18px;
color: #8f8f94;
}
.mui-card {
margin-bottom: 10px;
z-index: 10;
}
.mui-card div{
padding: 6px 6px;
}
.invest-list {
padding-top: 10px;
}
.more {
font-size: 18px;
color: #333;
}
.progress {
height: 11px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease
}
.progress-bar-success {
background-color: #5cb85c
}
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15)
25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%,
rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%,
transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%,
rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%,
transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%,
rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px
}
</style>
</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 id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="invest-list" class="invest-list">
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.invest-list');
var cells = document.body.querySelectorAll('.mui-card');
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count>2)); //refresh completed
for (var i = cells.length, len = i + 10; i < len; i++) {
var div = document.createElement('div');
div.className = 'mui-card';
var html = '';
html = html + ' <div class="mui-table invest-title"">';
html = html + ' <div class="mui-table-cell mui-col-xs-6">';
html = html + ' <h5>test</h5>';
html = html + ' </div>';
html = html + ' <div class="mui-table-cell mui-col-xs-6 mui-text-right">';
html = html + ' <h5>已售完</h5>';
html = html + ' </div>';
html = html + ' </div>';
html = html + ' <div class="mui-table">';
html = html + ' <div class="mui-table-cell mui-col-xs-4">';
html = html + ' <h5>金额</h5>';
html = html + ' <span class="mui-h5">85120.00 元</span>';
html = html + ' </div>';
html = html + ' <div class="mui-table-cell mui-col-xs-4">';
html = html + ' <h5>利率</h5>';
html = html + ' <span class="mui-h5">12%/年</span>';
html = html + ' </div>';
html = html + ' <div class="mui-table-cell mui-col-xs-4 mui-text-center">';
html = html + ' <h5>期限</h5>';
html = html + ' <span class="mui-h5">12个月</span>';
html = html + ' </div>';
html = html + ' </div>';
html = html + ' <div class="mui-table">';
html = html + ' <div class="mui-table-cell mui-col-xs-5">';
html = html + ' <div class="progress" style="text-indent: 0em; margin-left: 6px; padding: 0 0;position: relative;top: .1em;">';
html = html + ' <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%">';
html = html + ' <span class="sr-only"></span>';
html = html + ' </div>';
html = html + ' </div>';
html = html + ' </div>';
html = html + ' <div class="mui-table-cell mui-col-xs-2 mui-text-left">';
html = html + ' <span class="mui-h5">60%</span>';
html = html + ' </div>';
html = html + ' <div class="mui-table-cell mui-col-xs-5 mui-text-center">';
html = html + ' <img src="../images/an.png" alt="nav" style="width: 15px; position: relative;top: .2em;">';
html = html + ' <span class="mui-h5">100%利息保障</span>';
html = html + ' </div>';
html = html + ' </div>';
div.innerHTML = html;
table.appendChild(div);
}
}, 1500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>
</html>页面效果：
