请问下我按照MUI文档说的试了下下拉刷新+AJAX,但是没有反应,是怎么回事呢,还请知道的各位大大指点下帮我看看问题出在哪里,谢谢啦!
<!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 class="mui-content">
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<div id="box_json">
<!-- <div class="mui-card">
<div class="mui-card-header">页眉</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>Posted on January 18, 2016</p>
<p style="color: #333;">这里显示文章摘要,让读者对文章内容有个粗略的概念...</p>
</div>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Read more</a>
</div>
</div>-->
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
pullRefresh : {
container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down:{
height:50, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.自动下拉刷新一次
contentdown : "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
function pullfresh-function() {
//业务逻辑代码,比如通过ajax从服务器获取新数据;
mui.ajax({
url: "../JSON/ceshi.json",
type: "get",
async: true,
dataType: "json",
success: function(data) {
var data = data.article;
var oBox = document.getElementById("box_json");
var content = "";
for(var i = 0 ; i < data.length; i++) {
content += '<div class="mui-card">'+
'<div class="mui-card-header">'+data[i].title+
'</div>'+
'<div class="mui-card-content">'+
'<div class="mui-card-content-inner">'+
'<p>'+data[i].date+'</p>'+
'<p style="color: #333;">'+data[i].text+'</p>'+
'</div>'+
'</div>'+
'<div class="mui-card-footer">'+
'<a class="mui-card-link">Like</a>'+
'<a class="mui-card-link">Read more</a>'+
'</div>'+
'</div>'
}
oBox.innerHTML = content;
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
},
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
}
});
//注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
}
</script>
</body>
</html>
1 个回复
1***@qq.com
mui客服说:必须是双webview模式的。测试了一下 确实 。