dreamit1986
dreamit1986
  • 发布:2016-07-24 09:42
  • 更新:2019-11-05 20:34
  • 阅读:5593

下拉刷新后,上拉加载有时会反复执行

分类:MUI

下拉刷新后,上拉加载有时会反复执行,这个是怎么造成的呢

<!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>
2016-07-24 09:42 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

请上传完整的示例文件,方便我们这边调试。

  • 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

dreamit1986

dreamit1986 (作者)

页面文件 用的mui3.2.0

笑笑吧

笑笑吧

我也出现了。
下拉刷新时候,结束刷新
mui('#content').pullRefresh().endPulldownToRefresh();
然后重置上拉加载。
mui('#content').pullRefresh().refresh(true);

这个时候,就执行了上拉加载了,莫名其妙的。

android 没有问题。主要是iOS

  • dreamit1986 (作者)

    你的后来解决了么


    2016-07-28 08:59

  • 笑笑吧

    iOS下不用 这个重置的,就问题。 有个折中的办法,就是当下拉刷新后,禁止上拉,然后延迟两秒 在开启上拉。


    2016-08-18 17:51

  • Jonny515688

    同样碰到改问题,莫名其妙


    2017-03-23 15:42

4***@qq.com

4***@qq.com - 90后IT男

有没有大神解决下啊。

1***@qq.com

1***@qq.com - JackMe

臭傻逼,写这么多还命名用下划线

该问题目前已经被锁定, 无法添加新回复