pullrefresh 和mui-content在一起也不行 设置mui-fullscreen 后滚动下面大片空白，popoverDIV的滚动可以
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../../../css/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="../../../css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../../../css/ais.css" />
<style>
.li_fontsize {
font-size: 13px;
text-align: left;
}
body {
font-size: 14px;
}
.span-red {
background-color: #F3565D;
color: #fff;
border-radius: .25em;
font-size: 12px;
}
.mui-table-view {
background-color: #FFFFFF !important;
}
.mui-table-view-cell {
text-align: left !important;
}
.cell-right {
position: absolute;
right: 20px;
top: 10px;
}
#popover {
height: 245px;
width: 80%;
}
.icon-iconfontzhizuobiaozhun0268 {
color: #aaa;
}
.icon-xuanzhong {
color: #007aff;
}
.mui-checkbox {
border-bottom: 1px dashed gainsboro;
}
.row_padding {
padding-top: 200px;
}
.mui-fullscreen{
padding-top: 50px;
padding-bottom: 50px;
}
</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">
<input id="search_bus" type="search" onkeyup="Trip_QueryCustomer.serach()" style="width: -webkit-min-content;" placeholder="搜索对象">
</h1>
<!--<a class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right" id="save">保存</a>-->
<a class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right" id="add_bus" style="display: none;">新增</a>
<a class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right" id="add_cus" style="display: none;">新增</a>
</header>
<button type="button" id="save" class="mui-bar mui-bar-tab mui-btn mui-btn-block ais-Btn ais-Btn-bottom">保存</button>
<div class="mui-content">
<div class=" mui-scroll-wrapper" id="pullrefresh" style="top: 50px;bottom: 50px;">
<div class="mui-scroll">
<div class="mui-row">
<div class="mui-col-sm-6 mui-col-xs-6">
<button id="paixu" type="button" class="mui-btn mui-right" style="width: 100%;">
排序 <i class="icon iconfont icon-paixu"></i>
</button>
</a>
</div>
<div class="mui-col-sm-6 mui-col-xs-6">
<a href="#popover" id="filter" class="mui-btn" style="width: 100%;">
筛选 <i class="icon iconfont icon-shaixuan"></i>
</a>
</div>
</div>
<div id="list" style="padding-top: 5px;">
</div>
</div>
</div>
</div>
<div id="popover" class="mui-popover">
<div class="mui-row mui-scroll-wrapper" id="popoverDIV" style="height: 190px !important;background: white;">
<div class="mui-scroll" id="province">
<form class="mui-input-group">
</form>
</div>
</div>
<div class="mui-button-row" id="sx_btn">
<a href="#popover" id="p_c" style="width: 90px;" class="mui-btn ">取消</a>
<a href="#popover" id="p_s" style="width: 90px;" class="mui-btn ais-Btn">完成</a>
</div>
</div>
<div id="temp1" style="display: none;">
<ul class="mui-table-view mui-grid-view ">
<li class="mui-table-view-cell mui-col-xs-12 mui-col-sm-12 edit_checked">
<div class=" mui-col-xs-9 mui-col-sm-9">
<span style="font-size: 14px;">@name</span>
<p class="li_fontsize mui-ellipsis-2">地址：@address</p>
</div>
<div class=" mui-col-xs-3 mui-col-sm-3 cell-right">
<i class="icon iconfont icon-iconfontzhizuobiaozhun0268 mui-pull-right" style="font-size: 20px;" data-location="@location" data-address="@address" data-name="@name"></i>
</div>
</li>
</ul>
</div>
<script src="../../../js/mui.min.js"></script>
<script src="../../../js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Trip_QueryCustomer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: Trip_QueryCustomer.pullupRefresh
},
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
//auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: Trip_QueryCustomer.pulldownRefresh
}
},
beforeback: function() {
if(mui.os.plus) {
var list = plus.webview.currentWebview().opener();
list.reload(true);
}
return true;
}
})
var deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
deceleration: deceleration //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
mui.ready(function() {
Trip_QueryCustomer.init();
if(mui.os.plus) {
document.getElementById("sx_btn").className = "mui-button-row";
} else {
document.getElementById("sx_btn").className = "mui-button-row row_padding";
}
});
</script>
</body>
</html>
1 个回复
五叶神 - 世界上没有免费的午餐，也不要有一颗贪婪的心
ios没有问题，是安卓吧？ 安卓上拉加载的时候有时确实会有这样的问题，渲染不出来，中间出现空白，隔断，有个简单的解决办法
加个判断，是安卓手机移除mui-scroll这个结构，ios不影响，保证不会再出现上拉加载空白