手机端轻应用模拟原生的下拉刷新效果(JavaScript)
方案一:使用iscoll等有下拉功能的框架。
分析:因为项目的结构已经基本完成,再使用框架,会与原来的结构互相影响;
方案二:用JavaScript、Jquery写。
分析:可能没有直接使用框架的效果好,但可以尽量使效果贴近原生。
综合考虑,采用方案二。
/////////////////////////////////////////////////////////////////////////////////////////////////
参考博客:http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html
1、index.html
refreshFeedback:刷新状态提示语
loading:箭头和loading的gif图
tasks:刷新的内容
<div id="wrapper"> <div id="list">
<div id="refreshFeedback" style="width:100%;height:36px;position:absolute;z-index:9;background-color:orange;top:40px;"><p></p></div>
<div>
<div id="loading" style="width:92%;height:70px;position:absolute;z-index:0;top:-60px">
<p></p>
</div> <div class="list-group" id="tasks">
<!-- 内容动态生成-->
</div>
</div>
</div> </div>
2、app.js
searchTasks():刷新tasks内容的函数
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1:向上,2:向下,0:未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0; //如果滑动距离太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= 45 && angle < 135) {
result = 1;
}
else if (angle >= -135 && angle < -45) {
result = 2;
}
else {
return result;
}
return result;
}
var startX, startY;
var judge =0;
document.getElementById("list").addEventListener('touchstart', function (ev) {
ev = ev || window.event; //兼容IE
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY; //初始化动画时间
$("#tasks").css("transition","0s");
$("#loading").css("transition","0s");
//初始化向下的箭头
$("#loading p").css("transform","rotate(0deg)");
$("#loading p").html('<span class="glyphicon glyphicon-arrow-down"></span>'); }, false); document.getElementById("list").addEventListener('touchmove', function (ev) {
judge = 0;
ev = ev || window.event; //兼容IE
var shift=event.touches[0].pageY-startY; //手指在屏幕上划动的距离
var realShift=shift/2; //元素实际位移的距离
if( $('#wrapper #list').scrollTop()>0){
judge = 1; //说明滚动条不在顶部,不需要触发下拉刷新
return;
}
else{
if(shift>0){
//只有滚动条在顶部,且下划时,才阻止滚动的默认行为(不影响滚动条的正常行为)
event.preventDefault();
if(shift<260){ //移到一定位置就不移了
$("#loading").css("transform","translateY("+realShift+"px"+")");
$("#tasks").css("transform","translateY("+realShift+"px"+")");
} if(shift>=90){ //移到一定位置箭头垂直翻转
$("#loading p").css("transform","rotate(-180deg)");
}
else{
$("#loading p").css("transform","rotate(0deg)");
} }
}
}, false);
//手指离开屏幕,元素回到原位
document.getElementById("list").addEventListener('touchend', function (ev) {
ev = ev || window.event; //兼容IE
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch (direction) {
case 0:
break;
case 1: //向上
break;
case 2: //向下
if(judge==1){
return;
}
else{
$("#loading").css("transition","0.2s");
$("#tasks").css("transition","0.2s"); //还原的时候稍微慢一些 $("#loading").css("transform","translateY("+0+"px"+")");
$("#tasks").css("transform","translateY("+0+"px"+")"); if ((endY-startY)>90){
//$("#tasks").empty();
$("#loading p").html('<img src="img/loading2.gif">');//loading的gif图片
$("#loading").css("transition-delay","0.8s");//延迟0.8秒,模拟“思考”的效果
$("#tasks").css("transition-delay","0.8s");
whichPage = dataGroupPage[whichMemory];
whichPage.pageNo = 1;
searchTasks(dataGroupPage[whichMemory], memory[whichMemory]).then(function(data) {
if(data==1){
$("#refreshFeedback p").html("刷新成功");
}
else{
$("#refreshFeedback p").html("刷新失败");
}
$("#refreshFeedback").css("display","block").hide().delay(800).fadeIn().delay(1200).fadeOut();
}); }
}
break;
default:
}
}, false);
3、app.css
#loading p{
width:100%;
position:absolute;
bottom:30px;
padding:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
transition:0.2s;
font-size: larger;
color:grey;
} #loading p img{
width:20px;
height:20px;
}
#refreshFeedback{
display: none;
}
#refreshFeedback p{
margin:auto;
text-align: center;
line-height: 36px;
color:white;
}
4、另外,还有下滑翻页的部分
$('#wrapper #list').bind('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//如果上一次刷新得到的数据数小于一次刷新默认得到的数据数,说明这次刷新之后数据已经加载完毕,再滑动不再向数据库请求数据。
if(lastPageSize<dataGroupPage[whichMemory].pageSize){
return;
}
else{
dataGroupPage[whichMemory].pageNo += 1;
searchTasks(dataGroupPage[whichMemory], memory[whichMemory]);
}
}
});
手机端轻应用模拟原生的下拉刷新效果(JavaScript)的更多相关文章
- 移动端上拉加载,下拉刷新效果Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件,制作表格的下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- [Swift通天遁地]二、表格表单-(6)创建美观的表格弹性下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 关于h5手机端上拉加载和下拉刷新效果-1
1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...
- react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)
1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...
- android使用PullToRefresh实现上拉加载和下拉刷新效果
其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...
- Swift 自定义炫酷下拉刷新效果
先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...
- Android下拉刷新效果实现
本文主要包括以下内容 自定义实现pulltorefreshView 使用google官方SwipeRefreshLayout 下拉刷新大致原理 判断当前是否在最上面而且是向下滑的,如果是的话,则加载数 ...
- 代码实现Android5.0的下拉刷新效果
如图所示,实现类似与gmail的下拉刷新. 项目地址:https://github.com/stormzhang/SwipeRefreshLayoutDemo 一.在xml文件中定义 这个控件在sup ...
随机推荐
- 令人头疼的clientTop、scrollTop、offsetTop
1.网络上流传的图片 2.稍微容易理解点的示意图 参考链接:http://blog.csdn.net/lidiansheng/article/details/7950751 3.言简意赅的示意图 4. ...
- EventLog实现事件日志操作
选中”我的电脑”,在其右键菜单中选择“管理”,在打开的对话框中包括了如下图所示的“日志”信息: 选中其中的某一条日志,可以看到如下的详细信息: 我们应该如何通过写代码的方式向其中添加“日志”呢? 在操 ...
- SQL Server 2008R2 数据库出现“可疑”导致无法访问
日常对Sql Server 2005关系数据库进行操作时,有时对数据库(如:Sharepoint网站配置数据库名Sharepoint_Config)进行些不正常操作如数据库在读写时而无故停止数据库,从 ...
- BZOJ_1008_[HNOI2008]_越狱_(简单组合数学+快速幂)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1008 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰 ...
- java 页面url传值中文乱码的解决方法
parent.window.location.href 和 iframe中src的乱码问题.要在这两个url地址中传中文,必须加编码,然后再解码.编码:encodeURI(encodeURI(&quo ...
- 【转】iTunes下载速度太慢?两招帮你提速!-- 不错
原文网址:http://bbs.app111.com/thread-275-1-1.html 不用说,很多朋友都发现在大陆,下载 iTunes 上的东西实在是慢如蜗牛,小一点的软件还能坚持一下,大一点 ...
- 部署解决方案包 (SharePoint Server 2010)
转:http://technet.microsoft.com/zh-cn/library/cc262995(v=office.14).aspx 本文介绍各个解决方案包,及其在 Microsoft Sh ...
- MVC View基础
View主要用于呈现数据.由于Controller和相关的Service已经处理完业务逻辑并将结果打包成model实体,View只需要怎么去获得model并将其转为Html 1选择需要渲染的视图 在上 ...
- 如何使用eclipse进行嵌入式Linux的开发
如何使用eclipse进行嵌入式Linux的开发 作者:曾宏安,华清远见嵌入式学院高级讲师. 如何使用eclipse进行嵌入式Linux的开发 习惯了在windows环境下开发的程序员在转到Linux ...
- .9.png
.9.png是一种非失真性压缩位图图形文件格式.PNG格式是非失真性压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备阿尔法通道(半透明)等特性.现在有很多人使用PNG格式于互联网及 ...