移动端touch实现下拉刷新
移动端实现下拉刷新
第一部分：四个touch事件
1.touchstart：只要将手指放在了屏幕上（而不管是几只）,都会触发touchstart事件。
2.touchmove: 当我们用手指在屏幕上滑动时，这个事件会被连续触发。 如果我们不希望页面随之滑动，我们可以使用event的preventDefault来阻止这个默认行为。
3.touchend: 当手指滑动后离开屏幕，这时就触发了touchend事件。
4.touchcancel: 系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。
第二部分：四个touch对象
1. touches，这是一个类数组对象，包含了所有的手指信息，如果只有一个手指，那么我们用touches[0]来表示。
2. targetTouches 。 手指在目标区域的手指信息。
3. changedTouches：最近一次触发该事件的手指信息。
4. touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息。
第三部分：实例1
先看效果图：
它的实现原理非常简单，就是将红色圆形的postion属性设为absolute，然后，当我们滑动它时，就触发了touchmove事件，将其Left和top设置为event的pageX和pageY即可，为保证触发中心与圆心在同一位置，只需将pageX加上width的一半，pageY加上height的一半。
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>touchExample</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#touchDiv{
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
text-align: center;
line-height: 50px;
color:white;
border-radius: %;
background-color: red;
}
</style>
</head>
<body>
<div id="touchDiv">点我</div>
<script>
var touchDiv = document.getElementById("touchDiv");
var x,y;
touchDiv.addEventListener("touchstart",canDrag);
touchDiv.addEventListener("touchmove",drag);
touchDiv.addEventListener("touchend",nodrag);
function canDrag (e) {
console.log("god开始");
}
function drag (e) {
$("#touchDiv").css("left",e.touches[].pageX-);
$("#touchDiv").css("top",e.touches[].pageY-);
}
function nodrag () {
console.log("god结束");
}
</script>
</body>
</html>
第四部分：实例2
这个实例就是下拉刷新功能的实现，效果如下：
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>下拉刷新</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
*{
margin:;
padding: ;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
color:white;
font-size: 23px;
}
.drag_to_refresh{
align-items: center;
padding-left: 155px;
background-color: #bbb;
color:yellow;
display: none;
}
.refresh{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #bbb;
color: green;
display: none;
}
.drag{
text-align: center;
background-color: lightgray;
position: relative;
padding:20px;
text-indent: 1em;
line-height: 30px;
font-size:18px;
} </style>
</head>
<body>
<div class="header">政务云</div>
<div class="drag_to_refresh"></div>
<div class="refresh">刷新中...</div>
<div class="drag">电子政务云（E-government cloud）属于政府云，结合了云计算技术的特点，对政府管理和服务职能进行精简、优化、整合，并通过信息化手段在政务上实现各种业务流程办理和职能服务，为政府各级部门提供可靠的基础IT服务平台。</div>
<script>
window.onload = function () {
var initX;
var drag_content = document.querySelector(".drag");
var drag_to_refresh = document.querySelector(".drag_to_refresh");
var refresh = document.querySelector(".refresh"); drag_content.addEventListener("touchmove",drag);
drag_content.addEventListener("touchstart",dragStart);
drag_content.addEventListener("touchend",dragEnd); function dragStart(e){
initY = e.touches[].pageY;
console.log(initX);
} function drag (e){
drag_to_refresh.style.display = "block";
drag_to_refresh.style.height = (e.touches[].pageY - initY) + "px";
console.log(drag_to_refresh.style.height);
if(parseInt(drag_to_refresh.style.height)>=){
// 注意：因为height得到的值是px为单位，所以用parseInt解析
drag_to_refresh.style.height = "100px";
if(parseInt(drag_to_refresh.style.height)>){
drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
drag_to_refresh.innerHTML = "松开刷新";
}
}
} function dragEnd (e){
if(parseInt(drag_to_refresh.style.height)>){
refresh.style.display = "block";
setTimeout(reload,);
}
drag_to_refresh.style.display = "none";
} function reload () {
location.reload();
}
}
</script>
</body>
</html>
移动端touch实现下拉刷新的更多相关文章
- 分享一个discuz touch端的jQuery下拉刷新组件
在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...
- 分页插件思想：pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
- 移动端上拉加载下拉刷新插件-mescroll.js插件
官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...
- html5实现移动端下拉刷新（原理和代码）
这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...
- vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版
在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...
- vue2.0 移动端，下拉刷新，上拉加载更多 封装组件
前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...
- 实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...
- vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
随机推荐
- .NET反射
反射是一个程序集发现及运行的过程,通过反射可以得到*.exe或*.dll等程序集内部的信息.使用反射可以看到一个程序集内部的接口.类.方法.字段.属性.特性等等信息.在System.Reflectio ...
- make执行过程
转载自 陈皓<跟我一起写 Makefile> 一般来说,最简单的就是直接在命令行下输入make命令,make命令会找当前目录的makefile来执行,一切都是自动的.但也有时你也许只想让m ...
- CCF 201612-1 中间数
试题编号:201612-1 试题名称:中间数 时间限制:1.0s 内存限制:256.0MB 问题描述 在一个整数序列a1, a2, -, an中,如果存在某个数,大于它的整数数量等于小于它的整数数量, ...
- UVa 11747 - Heavy Cycle Edges
题目大意:计算最小生成树有两种算法:一种是kruskal算法,另一种是与之相反的:如果图中存在环,去掉权重最大的边,直到不存在环.输出去掉的那些边. 可以用kruskal算法解决,在判断一条边时如果加 ...
- [Angular Tutorial] 3-Components
在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...
- java中的double
代码如下: Double d1 = 0.35; Double d2 = 0.1; System.out.println(d1+d2); 结果很不幸不是0.45,而是0.4499999999999999 ...
- iOS 日期时间控件
UIDatePicker *picker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 0,[UIParam widthScreen] ,50 ...
- 一个简单版的波纹css3动画
ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...
- 一个参数引起的mysql从库宕机血案
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1859252 一个参数 ...
- 7-1 vim 编辑器
1. vi:visual interface. 1. vim:vi improved 这些都属于全屏编辑器,又是模式化编辑器 vim模式(3种) 编辑模式(命令模式) 输入模式 末行模式 模式转换 编 ...