父页
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #00a1ea;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#ffffff"></a>
<h1 class="mui-title">财务记录</h1>
</header>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="../js/mui.min.js"></script>
<script>
var url = 'finance_content.html';
mui.init({
swipeBack: true, //启用右滑关闭功能
statusBarBackground: '#00a1ea',
subpages: [{
id: url,
url: url,
styles: {
top: '44px',
bottom: '0px',
bounce: 'vertical'
}
}]
});
</script>
<script src="../js/mui.a.js"></script>
</body>
子页
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron financelist" id="topic_list"></ul>
</div>
</div>
<script>
var index;
var p = 1;
var topic_list = $("#topic_list");
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
mui.plusReady(function(){
//获得主页面webview引用；
index = plus.webview.currentWebview().opener();
});
function setHtml(_data) {
var addtime = formatDateTime(_data.addtime);
var html = '<li>' +
'<span>' + (_data.name==null?"":_data.name) + '</span>' +
'<span class="text-right" style="color:#666;">' + addtime + '</span>' +
'<span style="color:#666;">可用余额:' + (Math.floor(_data.balance * 100) / 100) + '元</span>';;
html += '<span class="text-right';
if (_data.expend_new > 0) {
html += ' text-clo3';
} else {
html += ' text-clo2';
}
html += '">';
if (_data.income_new > 0) {
html += '+' + (Math.floor(_data.income_new * 100) / 100);
} else if (_data.expend_new > 0) {
html += '-' + (Math.floor(_data.expend_new * 100) / 100);
} else {
html += (Math.floor(_data.money * 100) / 100);
}
html = html + '</li>';
topic_list.append(html);
}
function pulldownRefresh() {
mui.ajax({
type:"get",
url: getApiPrefix() + "account/users_finance.php?app=1&" + getRandStr(),
data: {
p: "1",
perpage: "20"
},
async: true,
dataType: "json",
success: function(data) {
p = 2;
topic_list.html("");
$.each(data.account_all, function(index, _data) {
setHtml(_data);
});
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
mui('#pullrefresh').pullRefresh().refresh(true);
}
});
}
function pullupRefresh() {
mui.ajax({
type: "get",
url: getApiPrefix() + "account/users_finance.php?app=1&" + getRandStr(),
data: {
p: p,
perpage: "20"
},
async: true,
dataType: "json",
success: function(data) {
p++;
mui('#pullrefresh').pullRefresh().endPullupToRefresh((p > data.num)); //参数为true代表没有更多数据了。
$.each(data.account_all, function(index, _data) {
setHtml(_data);
});
}
});
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 500);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>代码附上，mui的各位大神，求解答~要快呀~
2 个回复
果 (作者)
找到原因了~
是因为body里面设置了 height: 100%; ，去掉后安卓显示正常了
body { margin: 0; padding:0; background-color:#f0efed; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; font-size:0.24rem;}
果 (作者)
刚试过苹果，不能直接去掉height: 100%; 直接去掉会导致一片空白，改为min-height: 100%; 一切都正常了
阿饭达
哥们，谢谢了，解决我的大问题
2015-09-06 14:10