<!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>
<script src="http://dev.dcloud.net.cn/mui/dist/js/jquery-2.1.1.js"></script>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init({
pullRefresh : {
container:"#refreshContainer",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:false,//可选,默认false.自动上拉加载一次
contentup : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :pullfreshfunction //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
function pullfreshfunction() {
//业务逻辑代码，比如通过ajax从服务器获取新数据；
var num=$(".mui-table-view-cell").length;
var list='';
for(var i=1;i<=10;i++){
list+='<li class="mui-table-view-cell">Item '+(++num)+'</li>';
}
$(".demo-list").append(list);
mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
if(num>20){
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//显示底部没有更多数据
var bottomElem = document.querySelector('.mui-pull-loading');
if(!bottomElem.classList.contains('mui-visibility')) {
bottomElem.classList.add('mui-visibility');
}
}else{
//显示底部提示文字信息
var bottomElem = document.querySelector('.mui-pull-bottom-pocket');
if(!bottomElem.classList.contains('mui-visibility')) {
bottomElem.classList.add('mui-visibility');
}
}
}
</script> </head>
<body>
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron demo-list">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
</div>
</div>
</body>
</html>
mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
调用endPullupToRefresh(false)后，下一次调用endPullupToRefresh(true)时，底部“没有更多数据”不显示
技术的路上 (作者)
MUI没有提供反馈，我自己看了下CSS，发现底部“没有更多数据”的提示被隐藏了，我使用了这样的方式解决的
//显示底部没有更多数据
var bottomElem = document.querySelector('.mui-pull-caption-nomore');
if(!bottomElem.classList.contains('mui-visibility')) {
bottomElem.classList.add('mui-visibility');
}
2016-12-01 10:43