小微
小微
  • 发布:2015-01-24 19:52
  • 更新:2017-07-24 13:16
  • 阅读:18773

关于上拉加载的奇怪问题

分类:MUI

原本这个版本的手机产品都用mui开发,但是发现mui的功能有点简单,很多组件没有。比如
因为mui没有封装表单提交等操作,而我的表单字段特别多,所以加入了jquery。
导航上没有相关的下拉选项等组件,只能用jquery自己写。

回到正题

在上拉中载中,我使用的方法为
for(var i in result.data){
_html.push("<li class='mui-table-view-cell'>");
_html.push("<p class='mui-h6 mui-ellipsis'>说明:"+nullTran(result.data[i].content,'')+"</p>");
_html.push("</li>");
}
jQuery('#content').append(_html.join(""));

在安卓手机中正常追加数据,显示正常
在苹果手机上追加数据正常,但是页面每次都会自动滚到最上面。

2015-01-24 19:52 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

页面代码完整的贴一下

小微

小微 (作者)

main.html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  
	<header class="mui-bar mui-bar-nav">  
		<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>  
		<h1 class="mui-title">测试</h1>  
		<a class="mui-icon mui-icon-plusempty mui-pull-right" id="add"></a>  
	</header>  
	  
	<script type="text/javascript" charset="utf-8">  
  		mui.init({  
  			 keyEventBind:{  
				backbutton:false  
			 },  
  			 swipeBack: false,  
  			 subpages:[{  
		      url:'content.html',  
		      id:'content',  
		      styles:{  
		        top:'48px',//mui标题栏默认高度为48px;  
		        bottom:'0px'//默认为0px,可不定义;  
		      }  
		    }]  
  		});  
  		  
  		  
  		mui.plusReady(function() {  
  			//todo  
		});  
		  
  
			  
	</script>  
</body>  
</html>

content.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <script src="js/srm.js"></script>  
    <script src="js/jquery-1.11.1.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <link href="css/srm.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
      	mui.init({  
      		keyEventBind:{  
				backbutton:false  
			}  
      	});  
    </script>  
</head>  
<body>  
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
	  <div class="mui-scroll">  
	  	<div class="mui-input-row mui-search">  
			<input id="searchKey" type="search"  placeholder="搜索">  
		</div>  
	  	<ul  id="content" class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>  
	  </div>  
	  <div class="mui-loader srm-loader" id="loading">加载中...</div>  
	</div>  
	  
	<script type="text/javascript" charset="utf-8">  
			var searchKey = "";  
 	    	var page = 1;  
 	    	var hasMore = true;  
		  	mui.init({  
		  		pullRefresh : {  
				    container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
				    down : {  
				      contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
				      contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
				      contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
				      callback :pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
				    },  
				    up : {  
				      contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容  
				      contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;  
				      callback :loadMore //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
				    }  
				}  
		  	});  
		  	  
		  	function makeHtml(page,clearData){  
		  		var url = plus.storage.getItem("serverPath")+"/nb/qd/getdata";  
				mui.ajax(url,{  
					dataType:'json',  
					data:{page:page,go:"go",searchKey:searchKey},  
					type:'post',  
					timeout:10000,//超时时间设置为10秒;  
					success:function(result){  
						var _html = [];  
						if(result.data){  
							for(var i in result.data){    
								_html.push("<li class='mui-table-view-cell' id='"+result.data[i].id+"'>");  
								_html.push("<div class='mui-slider-right mui-disabled'><a class='mui-btn mui-btn-red' name='"+result.data[i].id+"'>删除</a></div>");  
					    		_html.push("<div class='mui-table-cell mui-col-xs-6  mui-slider-handle'>");  
					    		_html.push("<h5>作者:"+result.data[i].ownname+"</h5>");  
					    		_html.push("<p class='mui-h6 mui-ellipsis'>类别:"+nullTran(result.data[i].type,'')+"</p>");  
					    		_html.push("<p class='mui-h6 mui-ellipsis'>地址:"+nullTran(result.data[i].address,'')+"</p>");  
					    		_html.push("<p class='mui-h6 mui-ellipsis'>说明:"+nullTran(result.data[i].content,'')+"</p>");  
					    		_html.push("</div>");	  
					    		  
					    		_html.push("<div class='mui-table-cell mui-col-xs-6 mui-text-right'>");  
					    		_html.push("<span class='mui-h5'>"+result.data[i].createtime+"</span>");  
					    		_html.push("</div>");	  
					    		_html.push("</li>");	  
							}  
							  
				    	}else{  
				    		_html.push("<li class='mui-table-view-cell crm-text-align'>");  
				    		_html.push("暂无数据");  
				    		_html.push("</li>");  
				    	}  
						  
						var loading = document.getElementById("loading");  
						if(loading){  
							document.getElementById("pullrefresh").removeChild(loading);  
						}  
						  
						  
						if(clearData){  
							jQuery('#content').html(_html.join(""));  
						}else{  
							jQuery('#content').append(_html.join(""));  
						}  
						  
				    	mui('#pullrefresh').pullRefresh().endPulldownToRefresh();   
						  
						if(result.curPage<result.pageCount){  
							mui('#pullrefresh').pullRefresh().refresh(true);  
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);  
						}else{  
							hasMore = false;  
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
						}  
					},  
					error:function(xhr,type,errorThrown){  
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);  
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();   
					}  
				});  
		  	}  
		  	  
		  	function pulldownRefresh(){  
		  			mui('#pullrefresh').pullRefresh().refresh(true);  
		  			hasMore = true;  
		  			page = 1;  
		  			makeHtml(1,true);  
		  		}  
		  	}  
		  	  
		  	  
		  	function loadMore(){  
				if(hasMore){  
					page++;  
					makeHtml(page,false);  
				}else{  
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
				}  
  
		  	}  
		  	  
		  	if (mui.os.plus) {  
				mui.plusReady(function() {  
					setTimeout(function() {  
						pulldownRefresh();  
					}, 1000);  
  
				});  
			} else {  
				mui.ready(function() {  
					pulldownRefresh();  
				});  
			}  
			  
			  
			document.getElementById("searchKey").addEventListener('input',function(){  
				 //todo  
			});  
    </script>  
</body>  
</html>

现在的问题是,上拉加载后,苹果后机会自动滚到最上面

DCloud_UNI_FXY

DCloud_UNI_FXY

知道原因了,因为你不管下拉刷新还是上拉加载,每次都调用了

mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

导致上拉加载结束的时候,一调用endPulldownToRefresh(),就会回到顶部。

目前你可以自己识别一下,不要再上拉加载的时候调用endPulldownToRefresh。

后续版本我们会优化一下,避免这种情况的发生

小微

小微 (作者)

非常感谢

vinck

vinck

上拉加载,怎么避免重复提交呢?
上拉屏幕的时候,加载出数据的速度有点慢,不停的上拉会出现重复提交的情况。

小微

小微 (作者)

可以设置一个变量.
var oploading = false;
function loadMore(){
if(hasMore&&oploading ){
page++;
makehtml();
}

	  	}  

function makehtml(){
oploading = true;

//结束
oploading = false
}

vinck

vinck

设置变量也是没用的。 没法解决重复提交的问题。

小微

小微 (作者)

我有点没弄懂你什么意思,

不过不管你要干什么,防止重复提交有个最蠢的办法,锁住当前页面
plus.nativeUI.showWaiting();
操作完再关闭

DCloud_UNI_FXY

DCloud_UNI_FXY

上拉加载会重复?同一个上拉加载没有end之前,不会再触发上拉加载啊。
你的代码贴一下

  • 1***@163.com

    为什么mui 主动触发上拉加载后 滑动加载会失效??


    2017-08-21 18:41

vinck

vinck

找到原因了,设置了Timeout导致的。

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