今天做下拉刷新，上拉加载功能，上拉加载是好的，下拉刷新根本拉不动怎么办？
<!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" href="../../css/index.css" />
<style type="text/css">
#source,#time{
font-size: 12px;
color: gray;
margin: 10px 3px 3px 0;
}
.mui-ellipsis{
color: black;
font-size: 18px;
white-space: normal;
}
#span{
margin-top: 10px;
}
#span>span{
color: gray;
font-size: 13px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #da3a29;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
<!--此处的categoryname不能从ajax中取，因为存在该栏目下没有文章的情况，所以从首页传值过来-->
<h1 class="mui-title"><span id="categoryname"></span></h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" id="buttons">
</ul>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.caipiao.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: false,//关闭右滑
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
auto:false,//关闭自动上拉加载
callback: pullupRefresh
}
}
});
mui.plusReady(function(){
mui.caipiao.cleara();
//判断系统，如果是ios，webview添加样式
if(mui.os.ios){
plus.webview.currentWebview().setStyle({
scrollIndicator:'none'
});
}else{};
var self = plus.webview.currentWebview();
var spanid = self.spanid;
var categoryname=self.categoryname;
document.getElementById("categoryname").innerHTML=categoryname;
mui.caipiao.post(
'/e/cms/article/articlelist',
{
id:spanid
},
function(data){
var list = data.body.page.list;
//动态加载栏目中的文章
for(var i=0;i<list.length;i++){
var divid=data.body.page.list[i].id;
var title = data.body.page.list[i].title;
var updateDate = data.body.page.list[i].updateDate;
var image = data.body.page.list[i].image;
var src = "";
var imageUrl = plus.caipiao.imageUrl;
if(image){
var src =imageUrl+image;
}
/*var str =
'<li class="mui-table-view-cell mui-media">'
+'<img class="mui-media-object mui-pull-right" src="../../img/type/11x5.png">'
+'<div class="mui-media-body" data-flag="'+divid+'">'
+data.body.page.list[i].title
+'<p class="mui-ellipsis">'+data.body.page.list[i].updateDate+'</p>'
+'</div>'
+'</li>';
document.getElementById("buttons").innerHTML+=str;*/
var li = document.createElement("li");
li.className = "mui-table-view-cell mui-media";
li.id = divid;
var img = document.createElement("img");
img.src = src;
if(image){
img.className = "mui-media-object mui-pull-right";
}else{
img.style = "display:none";
}
var div = document.createElement("div");
div.className = "mui-media-body";
div.textContent = title;
var p = document.createElement("p");
p.className = "color: gray;font-size: 13px;"
p.textContent = updateDate;
li.appendChild(img);
li.appendChild(div);
div.appendChild(p);
var buttons = document.getElementById("buttons");
buttons.appendChild(li);
}
// mui('#buttons').pullRefresh().endPulldownToRefresh();
}
,'json'
);
})
//点击事件
mui.ready(function(){
mui("#buttons").on('tap','li',function(){
var url="details.html";
//获取id
var lid = this.getAttribute("id");;
mui.openWindow({
url:url,
id:url,
extras:{
pid:lid,
}
});
})
})
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
getMgEAStatus();
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
/**
* 上拉加载具体业务实现
*/
var count = "2";
function pullupRefresh() {
var self = plus.webview.currentWebview();
var spanid = self.spanid;
setTimeout(function() {
mui.caipiao.post(
'/e/cms/article/articlelist',
{
id:spanid,
pageNo:count
},
function(data){
//控制翻页
var list = data.body.page.list;
var no = data.body.pageno;
//最后一个括号里参数为true表示没有更多的数据了
mui('#pullrefresh').pullRefresh().endPullupToRefresh(count>no);
//动态加载栏目中的文章
for(var i=0;i<list.length;i++){
var divid=data.body.page.list[i].id;
var title = data.body.page.list[i].title;
var updateDate = data.body.page.list[i].updateDate;
var image = data.body.page.list[i].image;
var src = "";
var imageUrl = plus.caipiao.imageUrl;
if(image){
var src =imageUrl+image;
}
var li = document.createElement("li");
li.className = "mui-table-view-cell mui-media";
li.id = divid;
var img = document.createElement("img");
img.src = src;
if(image){
img.className = "mui-media-object mui-pull-right";
}else{
img.style = "display:none";
}
var div = document.createElement("div");
div.className = "mui-media-body";
div.textContent = title;
var p = document.createElement("p");
p.className = "color: gray;font-size: 13px;"
p.textContent = updateDate;
li.appendChild(img);
li.appendChild(div);
div.appendChild(p);
var buttons = document.getElementById("buttons");
buttons.appendChild(li);
}
}
,'json'
);
//下一页
count++;
}, 500);
}
</script>
</body>
</html>
我在pulldownRefresh()中加了alert，发现pulldownRefresh()根本就没调用，页面上往下拉，是固定死的，根本拉不动。就是没有监听到下拉事件，求大神帮忙看看，谢谢了。
CJH
记得下次通过压缩包，上传下代码附件...
2017-03-21 11:32
c***@qq.com (作者)
回复 CJH:好的，我重新发个帖@一下你。
2017-03-21 11:44