`

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;    		    	
}

希望对大家有所帮助,祝好运! 

分享到:
评论

相关推荐

    APICloud教程:服务器上的页面执行API

    ### APICloud教程:服务器上的页面执行API #### 背景介绍 APICloud作为一款混合开发平台,为开发者提供了高效便捷的应用开发方案。它不仅支持原生接口的调用,还允许开发者通过HTML5、JavaScript等前端技术进行...

    ApiCloud下:视频播放模块SDK

    在APICloud平台上,开发者可以利用其提供的视频播放模块SDK来构建具有强大视频播放功能的应用程序。这个SDK专为Android Studio设计,便于在apicloud的自定义模块开发中使用。以下将详细介绍APICloud视频播放模块SDK...

    信息安全_数据安全_APICloud:服务CAF开发者.pdf

    此外,APICloud还提供了一系列的数据服务,包括模型定义、Restful API、访问控制和数据存储等,使开发者能够更好地管理自己的数据。 APICloud不仅关注移动应用的开发,还非常重视物联网(IoT)设备的安全。在物联网...

    APICloud开发工具:WebStorm插件

    综上所述,APICloud开发工具的WebStorm插件是提升APICloud项目开发效率和质量的重要工具。它通过集成智能提示、代码格式化、实时预览、构建打包、版本控制和调试等功能,将WebStorm转变为一个专门为APICloud开发者量...

    APICloud:轻松6步完成App软件开发

    ### APICloud:轻松6步完成App软件开发 随着移动互联网的发展,应用程序(App)已成为人们生活中不可或缺的一部分。然而,对于那些不具备编程技能的人来说,开发一款App似乎是一项难以企及的任务。幸运的是,APICloud...

    APICloud数据云API文档

    总的来说,APICloud数据云API是移动开发者用于构建跨平台应用的重要工具,它提供了一种灵活且标准化的方式来管理和操作云端数据,支持多种编程语言,且具有良好的安全性和可扩展性。通过理解和熟练使用这些API,...

    APICloud教程-如何提高移动性能

    ### APICloud教程:如何提高移动性能 #### 移动开发规范概述 为了提升移动应用的性能,开发者需要遵循一定的规范。以下规范是由Alloyteam团队根据实际开发经验总结提炼得出,具有很好的项目实践价值。 #### 字体...

    Apicloud中针对UIActionSelector模块中选择省市区三级联动的所有城市数据

    在实际应用中,可能还需要考虑数据的动态加载和更新,例如在首次打开应用时只加载省份数据,当用户选择省份后再加载对应的城市数据,以此优化性能。此外,对于`city.json`数据的维护,确保数据的时效性和准确性也是...

    apicloud 导航菜单获取数据库数据

    在APICloud开发中,构建一个动态的导航菜单通常涉及到从后端数据库获取数据并将其呈现在前端应用上。APICloud是一个强大的移动应用开发平台,它允许开发者使用JavaScript编写原生移动应用,同时提供了丰富的API来与...

    apicloud模块权限.zip

    这个名为"apicloud模块权限.zip"的压缩包显然包含了与APICloud相关的代码和资源,用于获取和管理在Android和iOS平台上所需的特定模块权限。以下是对这些知识点的详细解释: 1. **APICloud**:APICloud 是一套完整的...

    apicloud七天培训课day3代码

    在APICloud七天培训课程的第三天,我们深入学习了如何使用APICloud平台进行移动应用开发,特别是关于代码编写和项目构建的相关知识。APICloud是一个跨平台的移动开发框架,它允许开发者使用JavaScript来构建原生的...

    APICloud-SuperWebview开发指南Android

    在APICloud的框架下,SuperWebview是一个至关重要的组件,它为Android应用提供了增强型的WebView功能,提升了网页在移动设备上的性能和用户体验。本文将深入探讨APICloud-SuperWebview的开发指南,旨在帮助开发者...

    使用APICloud从1开始写玩转晋城一概览

    晋城应用的main部分可能包含列表、图片、文字等多种元素,需要通过适当的布局技术(如网格系统、流式布局等)进行组织,并结合APICloud提供的API进行数据加载和交互处理。 进入实际开发,我们需要从入口文件`index....

    藏经阁-APICloud服务CAF开发者:共筑YunOS开发者生态.pdf

    APICloud认为,IoT设备控制将是未来应用开发的方向,APICloud也在这个方向上进行了相关的研究和开发。 知识点3:APICloud对YunOS应用的开发支持 APICloud提供了对YunOS应用的开发支持,包括云应用开发控制台、应用...

    APICloud APP开发工具新增WiFi真机调试和实时预览功能

    WiFi真机调试功能允许开发者通过无线网络将APICloud开发工具(如APICloud Studio、Sublime Text和WebStorm)与真机连接起来,实现真机上的实时调试和同步。与传统的USB接口调试相比,这种方式提供了更高的灵活性和更...

    APICloud AppLoader.zip

    APICloud AppLoader APICloud AppLoaderv1.2.18更新日志 模块新增: 1.waterBallProgress 概述:水球波浪加载指示器模块(来自个人模块开发者) 2.duibaSales 概述:兑吧商城模块(来自个人模块开发者) 3....

    APICloud-polyfill脚手架

    总之,APICloud-polyfill脚手架是APICloud开发中的一个重要工具,它让开发者能够充分利用现代前端技术,提高开发效率,同时确保应用在各种设备上的兼容性和稳定性。通过深入理解和熟练运用,你可以构建出更加健壮、...

    vue_apicloud:使用vue和apicloud构建混合应用程序

    使用vue和apicloud可以快速构建一个App。 todo app推送 自动更新(apicloud官方提供了,可以整合使用) 快速开始 # 1. 先检查下 Node.js 是否安装成功 $ node -v v10.0.0 $ npm -v 6.2.0 # 2. 由于众所周知的原因,...

Global site tag (gtag.js) - Google Analytics