index.html
<!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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 id="title" class="mui-title">下拉刷新和上拉加载更多</h1>
</header>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'content_list.html',
id:'content_list.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
</script>
</html>content_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<!--下拉刷新容器-->
<div id="content_list_container" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-table-view" id="content_list">
<!--数据列表-->
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#content_list_container',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
function pullupRefresh() {
var content_list = document.body.querySelector('#content_list');
for (var i = 0, len = 20; i < len; i++) {
var card = document.createElement('div');
card.className = 'mui-card';
card.innerHTML = " <div class='mui-card-content'>" +
"<div class='mui-card-content-inner'>" +
" cc这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等" +
"</div>" +
"</div>";
content_list.appendChild(card);
}
this.endPullupToRefresh(false);
}
mui.plusReady(function () {
mui('#content_list_container').scroll();
});
</script>
</html>
9***@qq.com
我也纠结了好多个小时啊，，
2017-12-20 22:46