APICloud（九）：上拉加载数据和长按事件

 1、上拉加载数据，APICloud提供了方法：只要监听scrolltobottom事件就好了。当滚动条滚动到最低端时就会触发该事件，然后通过ajax调用数据就好。

 

2、长按事件：这个事件APICloud倒是也有提供，只是针对的范围不是太大就是太小。我所接触到的有长按事件的目前只要两个：一个是整个window的长按事件，一个是预览图片时长按事件（可以用来保存、删除图片什么的，前面的博客中有提到）。对于指定区域的长按事件却没有提供方法。

 

而最近写的功能，需要用到这个长按事件。基本业务还是拿微信的朋友圈来说吧。

 

自己除了可以看公共的朋友圈列表之外，更能够看自己的，且可以删除自己发的朋友圈。目前微信的做法是在每一条朋友圈时间的后面加了“删除”字样，通点击“删除”字样来删除选中的朋友圈。

 

当然，我这边也可以这样子写，但是因为最开始的时候并没有添加删除的功能（这也是个失误，什么维护功能没有删除啊），也就是没有对应的位置来放置删除按钮了，现在再来添加代码未免显得有点麻烦而且可能对别的功能有影响，再加上个人觉得加个“删除”字样太low太没新意，就想着能不能长按删除。

 

前面说过了APICloud没有提供指定区域长按事件，只能找别的方法了，最后找到了hammer.js，这个小东西功能虽不多但是很实用，都是一些常用的功能，有相关需要的可以学习一下。

以下是长按方法的基本使用：

/*DIV的结构
<div style="border:#058 4px solid;width:200px;height:200px;margin:0 auto;" 
id="longPressDiv"></div>
*/

var div = document.getElementById("longPressDiv");
var hammertime = new Hammer(div);
hammertime.on("press", function (e) {
	//alert("长按测试成功");
});

使用jQuery同时给多个对象绑定press方法也可以：

$("#longPressDiv>ul>li").each(function(){
	var hammertime = new Hammer(this);
	hammertime.on("press", function (e) {
		//alert("长按测试成功");
	});
});

但是还是会存在一个问题：动态加载数据的时候怎么给对象绑定press事件。

使用上面的JQuery测试例子为例，ul下面的li若是写死的如上绑定事件可以识别没有问题，若是通过事件（像上面提到的上拉加载数据）动态添加li就识别不了了。对于这个动态加载数据的检测，大家可能会想到jQuery的live方法，可是live方法第一个参数要求绑定事件且必须绑定事件，这里能绑定什么事件呢？所以不能用live来处理。最后想了一个不是办法的办法：我标记一下，每次加载数据了就往li上人为的添加一个属性，如sign=1，再通过jQuery选择器选择sign=1的li，等到绑定press事件之后，将sign修改成2，这样子就能保证每次选择到的数据都是没有添加事件的。

 

以上是基本思路，综合上拉加载数据和长按事件以及我自己项目中的使用情况，我的业务处理情况如下：

var page=1;//当前页数
var totalPage = 1;//总页数
apiready=function(){
	//显示加载数据的进度条
	api.showProgress({
		title: '数据加载中',
		modal: true
	});
	
	//通过ajax加载数据
	loadMyNotice();
	
	//添加下拉刷新
	refreshList();
  
    //添加滚动条监听事件：滚动条滚动到最底端时生效            
    api.addEventListener({
        name:'scrolltobottom'
    },function(ret,err){
    	showProgress();//进度条提醒
    	if(page==totalPage){//当前页即为最后一页，那么进行提醒，不加载数据
    		api.hideProgress();//隐藏进度提示框	
    		api.toast({
                msg:'已经是最后一页了'
            });
            return false;
    	}else{
    		page = page+1;            	
    		loadMyNotice();
    	}
    });
}

//该方法用来加载数据
function loadMyNotice(){
	api.ajax({
        url:$api.getStorage("url"),
        method:'post',
        dataType:'text',
        data:{
        	values:{
        		'page':page,
        		'user_id':$api.getStorage("u_id"),
        		'time':new Date().getTime()
        	}
        }
    },function(ret,err){
    	api.hideProgress();//隐藏进度提示框		
    	if(ret){
    		ret = eval('('+ret+')');
    		var html = addHtmlForPage(ret);
    		if(page==1){
    			$api.html($api.byId("mynotice"), html);
    		}else{
    			$api.append($api.byId("mynotice"), html);
    		}
    		
    		//添加长按事件
    		addLongPress();
    	}else{//没有数据时也会进入到这里
    		$api.html($api.byId("mynotice"),"");//清空数据
    		if(err.length>0){//说明有错误数据，那么弹出提醒
    			alert(err);
    		}            		
    	}
    	
    });
}
//该方法用来拼接字符串
function addHtmlForPage(data){
	var html = "";
	var len = data.length;
	if(page==1){//第一页
		totalPage = data[len-1].totalPage;//总页数
		len = len-1;
	}
	for(var i=0;i<len;i++){
		html +="<p class='p_time'><time>"+data[i].field6+"</time></p>"
			+"<article sign=\"1\" curID=\""+data[i].field1+"\">"
	    	+"<h2 class='p_tit'>"+data[i].field5+"</h2>"
	    	+"<p class='p_content'>"+data[i].field2+"</p>";
	    if((data[i].field3).toString().length>0){//说明有图片信息
	    	html+="<span class='p_img'>"+getImg((data[i].field3).toString())+"</span>";
	    }
	    html+="</article>";
	}
	return html;
} 

//该方法用来添加长按事件
function addLongPress(){
	//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
	$("#mynotice>article[sign=1]").each(function(i){
		$(this).attr("sign","2");
		var notice_id = $(this).attr("curID");
		var $this = $(this);
		var hammertime = new Hammer(this);
		//添加事件
		hammertime.on("press", function (e) {
			api.actionSheet({
				title: '删除',
				cancelTitle: '取消',
	    		destructiveTitle: '删除'//红色警示按钮标题，一般用于做一些删除之类操作
            },function(ret,err){
            	if(ret.buttonIndex==2){//取消
            		return false;
            	}
            	
            	//删除。弹出框进行提醒
            	api.confirm({
                		title: '提示',
				msg: '确认删除吗',
				buttons: ['确定', '取消']
                    },function(ret,err){
                    	//取消
                    	if(ret.buttonIndex==2){
                    		return false;
                    	}
                    	
                    	//确认，通过ajax进行删除
                    	api.showProgress({
                        	title: '删除中',
							modal: true
                        });
                    	api.ajax({
                			url:$api.getStorage("url"),
				            method:'post',
				            dataType:'text',
				            data:{
				            	values:{
				            		'notice_id':notice_id,
				            		'time':new Date().getTime()
				            	}
				            }
                		},function(ret,err){//若是成功返回空字符串，否则返回错误信息
			            	api.hideProgress();//隐藏进度提示
			            	if(ret.length<=0){
			            		$this.remove();//移除当前公告
			            	}else{
			            		alert(ret);
			            	}
                		});
                  });
            });
		});
	});
}

//该方法用来下拉刷新
function refreshList(){
	api.setRefreshHeaderInfo({
		visible:true,//是否可见，若设置为false，下拉区域不能隐藏且刷新界面为黑色，什么内容也看不到。
		bgColor: '#ccc',//背景色
		textColor: '#fff',//文本颜色
		textDown: '下拉刷新...',//下拉文字描述，默认值：下拉可以刷新
		textUp: '松开刷新...',//松开时文字描述，默认值：松开可以刷新
		textLoading:'加载中..',//加载状态文字描述
		//textTime:'',，//更新时间文字描述,默认格式为：最后更新+日期时间
		showTime:true//是否需显示更新时间
	},function(ret,err){
	  	//alert("下拉刷新成功");
		api.refreshHeaderLoadDone();//恢复默认状态
	
		//重新加载当前页面
	    window.location.reload();
	});
}

//该方法用来拼接图片字符串
function getImg(imgStr){
	var imgHtml = "",imgPath="";
	var imgArr = imgStr.split(",");
	var s_ip = $api.getStorage("s_ip");
	for(var i=0;i<imgArr.length;i++){
		imgHtml+="<img src=\""+s_ip+imgArr[i].toString()+"\" onclick=\"previewThePic(this);\"/>";
	}
	return imgHtml;    		    	
}

希望对大家有所帮助，祝好运！