下拉刷新后，上拉加载有时会反复执行，这个是怎么造成的呢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>news-list</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">
<link rel="stylesheet" href="css/override.css" />
<link rel="stylesheet" type="text/css" href="css/pull-to-refresh.css" />
<style type="text/css">
.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item) {
line-height: inherit;
position: relative;
display: inline;
}
#slider-image> div.mui-slider-group.mui-slider-loop> div.mui-slider-item> a> img {
height: 220px;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
border: none;
}
.mui-table-view .mui-media-object {
max-width: 130px;
max-height: 80px;
height: 100%;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="slider-segmented-control" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div id="slider-segmented-control-scroll" class="mui-scroll">
<a id="control-locked" class="mui-control-item mui-active" href="#item-locked">
要闻
</a>
<a id="category-trigger" class="mui-control-item">
+
</a>
</div>
</div>
<div id="item-slider-group" class="mui-slider-group">
<div id="item-locked" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll" data-category="7" data-hassliderimage="true">
<ul class="mui-table-view">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/constants.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/content-eye-protect.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//生成栏目标签
function createTabs(shownCategories) {
var categoryTrigger = document.querySelector("#category-trigger");
var controlScroll = document.querySelector("#slider-segmented-control-scroll");
var sliderGroup = document.querySelector("#item-slider-group");
var shownCategoriesJsonArray = JSON.parse(shownCategories);
for(var i = 0; i < shownCategoriesJsonArray.length; i++) {
var _showCategoryJson = (shownCategoriesJsonArray[i]);
var _a = document.createElement("a");
_a.className = "mui-control-item";
_a.setAttribute("href", "#item" + i);
_a.innerHTML = _showCategoryJson.title;
controlScroll.insertBefore(_a, categoryTrigger);
var _div = document.createElement("div");
_div.className = "mui-slider-item mui-control-content";
_div.id = "item" + i;
var _div2 = document.createElement("div");
_div2.className = "mui-scroll-wrapper";
var _div3 = document.createElement("div");
_div3.className = "mui-scroll";
_div3.setAttribute("data-category", _showCategoryJson.id);
_div3.setAttribute("data-hassliderimage", _showCategoryJson.hasSliderImage);
_ul = document.createElement("ul");
_ul.className = "mui-table-view";
_div3.appendChild(_ul);
_div2.appendChild(_div3);
_div.appendChild(_div2);
sliderGroup.appendChild(_div);
}
}
//创建焦点图
function createSliderImage(category) {
var slider = document.createElement("div");
slider.className = "mui-slider";
var sliderGroup = document.createElement("div");
sliderGroup.className = "mui-slider-group mui-slider-loop";
var sliderIndicator = document.createElement("div");
sliderIndicator.className = "mui-slider-indicator mui-text-right";
mui.ajax({
type: "get",
url: SLIDER_IMAGE_API_BASE_URL + "&catid=" + category + "&num=3",
async: true,
dataType: "json",
success: function(data) {
mui.each(data.items, function(index, _item) { //循环新闻列表数组
//创建每个sliderItem
var _img = document.createElement("img");
_img.src = _item.thumbnail;
var _p = document.createElement("p");
_p.className = "mui-slider-title";
_p.innerHTML = _item.title;
var _a = document.createElement("a");
_a.href = "#";
_a.setAttribute("data-id", _item.id);
_a.setAttribute("data-category", data.category);
var sliderItem = document.createElement("div");
sliderItem.className = "mui-slider-item";
_a.appendChild(_img);
_a.appendChild(_p);
sliderItem.appendChild(_a);
//点击进入详情
sliderItem.addEventListener("tap", function() {
mui.openWindow({
url: "news-detail.html",
id: "news-detail.html",
extras: {
_id: _item.id,
_category: category,
}
});
});
sliderGroup.appendChild(sliderItem);
//创建每个indicator
var indicator = document.createElement("div");
if(index == 0) {
indicator.className = "mui-indicator mui-ellipsis mui-active";
} else {
indicator.className = "mui-indicator mui-ellipsis";
}
sliderIndicator.appendChild(indicator);
});
//添加首尾链接
var _firstSliderItem = sliderGroup.firstElementChild;
var _firstClone = _firstSliderItem.cloneNode(true);
_firstClone.classList.add("mui-slider-item-duplicate");
var _lastSliderItem = sliderGroup.lastElementChild;
var _lastClone = _lastSliderItem.cloneNode(true);
_lastClone.classList.add("mui-slider-item-duplicate");
sliderGroup.insertBefore(_lastClone, _firstSliderItem);
sliderGroup.appendChild(_firstClone);
slider.appendChild(sliderGroup);
slider.appendChild(sliderIndicator);
//slider上的操作要slider加载完毕后再执行
mui(slider).slider({ //自动轮播
interval: 5000
});
},
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
}
});
return slider;
}
//创建文章列表元素
function createPullToRefreshItems(_ul, data, refresh) {
var documentFragment = document.createDocumentFragment();
//每循环一次就创建一个mui-table-view-cell节点
mui.each(data.items, function(index, _item) { //循环新闻列表数组
//创建一个新的li
var _li = document.createElement("li");
_li.className = "mui-table-view-cell mui-media";
_li.setAttribute("data-id", _item.id);
_li.setAttribute("data-category", data.category);
var _img = document.createElement("img");
_img.className = "mui-media-object mui-pull-left";
_img.src = _item.thumbnail;
var _div = document.createElement("div");
_div.className = "mui-media-body"; //mui-ellipsis
var _text = document.createTextNode(_item.title);
_div.appendChild(_text);
if(_item.thumbnail) {
_li.appendChild(_img);
}
_li.appendChild(_div);
documentFragment.appendChild(_li);
//每个li点击后进入新闻详情页
_li.addEventListener("tap", function(event) {
mui.openWindow({
url: "news-detail.html",
id: "news-detail.html",
extras: {
_id: _item.id,
_category: data.category,
}
});
});
});
//如果刷新（下拉的情况）
if(refresh) {
var _ulClone = _ul.cloneNode();
var _parent = _ul.parentNode;
_parent.removeChild(_ul);
_ulClone.appendChild(documentFragment);
_parent.insertBefore(_ulClone, _parent.lastElementChild); //插入到上拉提示条上方
} else {
_ul.appendChild(documentFragment);
}
}
var pages = []; //初始页
var size = 3; //每页几个
var deceleration = mui.os.ios ? 0.003 : 0.0009; //阻尼系数
mui(".mui-scroll-wrapper").scroll({
bounce: true,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
mui.plusReady(function() {
//加载标签
var shownCategories = plus.storage.getItem("shownCategories");
createTabs(shownCategories);
//处理pullToRefresh
var pullToRefreshs = document.querySelectorAll(".mui-slider-group .mui-scroll");
mui.each(pullToRefreshs, function(index, _pullToRefresh) {
pages[index] = 1; //初始页为1
var category = _pullToRefresh.getAttribute("data-category"); //获得附在a标签上的新闻类别id数据
var hasSliderImage = _pullToRefresh.getAttribute("data-hassliderimage");
//焦点图处理
if(hasSliderImage == "true") {
var slider = createSliderImage(category);
_pullToRefresh.insertBefore(slider, _pullToRefresh.firstElementChild); //焦點圖插在拉動刷新區的上方
}
//上下拉处理
mui(_pullToRefresh).pullToRefresh({
//下拉刷新
down: {
height: 100,
contentinit: '下拉可以刷新',
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function() {
var self = this;
mui.ajax({
type: "get",
url: NEWS_LIST_API_BASE_URL + "&size=" + size + "&catid=" + category + "&page=1",
async: true,
dataType: "json",
success: function(data) {
var _ul = self.element.querySelector(".mui-table-view"); //获得第一个.mui-table-view也就是最近一次加载出来的列表ul
createPullToRefreshItems(_ul, data, true);
},
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
}
});
setTimeout(function() {
self.endPullDownToRefresh(); //完成后要停止刷新
self.refresh(true);
pages[index] = 2;
}, 500);
}
},
//上拉加载
up: {
auto: true,
offset: 0, //距离底部高度(到达该高度即触发)
show: false,
contentinit: '上拉显示更多',
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了',
callback: function() {
var self = this;
mui.ajax({
type: "get",
url: NEWS_LIST_API_BASE_URL + "&size=" + size + "&catid=" + category + "&page=" + pages[index],
async: true,
dataType: "json",
success: function(data) {
var nomore = (pages[index] == data.num);
pages[index] = pages[index] + 1; //每加载一页页码就自增一次
var _ul = self.element.querySelector(".mui-table-view"); //获得第一个.mui-table-view也就是最近一次加载出来的列表ul
createPullToRefreshItems(_ul, data, false);
self.endPullUpToRefresh(nomore); //完成后要停止刷新
},
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
}
});
}
}
});
});
});
//跳转栏目定制页
document.querySelector("#category-trigger").addEventListener("tap", function() {
mui.openWindow({
url: "category.html",
id: "category.html"
});
});
</script>
</body>
</html>
dreamit1986 (作者)
页面文件 http://ask.dcloud.net.cn/file/download/file_name-bmV3cy1saXN0LnppcA==__url-aHR0cDovL2ltZy5jZG4ucWluaXUuZGNsb3VkLm5ldC5jbi91cGxvYWRzL2Fuc3dlci8yMDE2MDcyNC84N2NkMDVjMDcxM2ZhNjI2NmVmNmY4ZDZiNDY3NTJlMA== 用的mui3.2.0
2016-07-24 20:31
dreamit1986 (作者)
接口地址不太方便给了，请原谅，生成的列表元素是标准的按照hellomui例子的样子生成的，然后在上下拉上边有一个轮播图，最上边的Tab是动态生成的
2016-07-24 20:52
Jonny515688
我也碰到改问题，目前没有查到原因。pullsh.refresh(true);这样一重置就会去执行刷新，不是想要的效果
2017-03-23 15:40
1***@qq.com
能给出答案否，到底是为啥？？
2018-01-31 17:17