<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<style type="text/css">
*{margin: 0;padding:0}
#slideDown{margin-top: 0;width: 100%;}
#slideDown1,#slideDown2{width: 100%;height: 70px;;background: #e9f4f7;display: none;}
#slideDown1{height: 20px;}
#slideDown1>p,#slideDown2>p{margin: 20px auto;text-align:center;font-size: 14px;color: #37bbf5;}
</style> </head>
<body> <div id="content">
<div id="slideDown">
<div id="slideDown1">
<p>松开刷新</p>
</div>
<div id="slideDown2">
<p>正在刷新 ...</p>
</div>
</div>
<div class="myContent">
<ul>
<li>item1 -- item1 -- item1</li>
<li>item2 -- item2 -- item2</li>
<li>item3 -- item3 -- item3</li>
<li>item4 -- item4 -- item4</li>
<li>item5 -- item5 -- item5</li>
<li>item6 -- item6 -- item6</li>
<li>item7 -- item7 -- item7</li>
</ul>
</div>
</div>
<script>
//第一步:下拉过程
function slideDownStep1(dist){ // dist 下滑的距离,用以拉长背景模拟拉伸效果
var slideDown1 = document.getElementById("slideDown1"),
slideDown2 = document.getElementById("slideDown2");
slideDown2.style.display = "none";
slideDown1.style.display = "block";
slideDown1.style.height = (parseInt("20px") - dist) + "px";
}
//第二步:下拉,然后松开,
function slideDownStep2(){
var slideDown1 = document.getElementById("slideDown1"),
slideDown2 = document.getElementById("slideDown2");
slideDown1.style.display = "none";
slideDown1.style.height = "20px";
slideDown2.style.display = "block";
//刷新数据
//location.reload();
}
//第三步:刷新完成,回归之前状态
function slideDownStep3(){
var slideDown1 = document.getElementById("slideDown1"),
slideDown2 = document.getElementById("slideDown2");
slideDown1.style.display = "none";
slideDown2.style.display = "none";
} //下滑刷新调用
k_touch("content","y");
//contentId表示对其进行事件绑定,way==>x表示水平方向的操作,y表示竖直方向的操作
function k_touch(contentId,way){
var _start = 0,
_end = 0,
_content = document.getElementById(contentId);
_content.addEventListener("touchstart",touchStart,false);
_content.addEventListener("touchmove",touchMove,false);
_content.addEventListener("touchend",touchEnd,false);
function touchStart(event){
//var touch = event.touches[0]; //这种获取也可以,但已不推荐使用 var touch = event.targetTouches[0];
if(way == "x"){
_start = touch.pageX;
}else{
_start = touch.pageY;
}
}
function touchMove(event){
var touch = event.targetTouches[0];
if(way == "x"){
_end = (_start - touch.pageX);
}else{
_end = (_start - touch.pageY);
//下滑才执行操作
if(_end < 0){
slideDownStep1(_end);
}
} }
function touchEnd(event){
if(_end >0){
console.log("左滑或上滑 "+_end);
}else{
console.log("右滑或下滑"+_end);
slideDownStep2();
//刷新成功则
//模拟刷新成功进入第三步
setTimeout(function(){
slideDownStep3();
},2500);
}
}
} </script>
</body>
</html>

  

touch下拉刷新的更多相关文章

  1. 移动端touch实现下拉刷新

    移动端实现下拉刷新 第一部分:四个touch事件 1.touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件. 2.touchmove: 当我们用手指在屏幕上滑 ...

  2. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  3. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. Android之自定义控件-下拉刷新

    实现效果: 图片素材:         --> 首先, 写先下拉刷新时的刷新布局 pull_to_refresh.xml: <resources> <string name=& ...

  5. ListView下拉刷新

    本内容为复制代码: 一.自定义ListView控件: package com.xczl.smart.view; import java.util.Date; import com.suliang.R; ...

  6. [Android]下拉刷新控件RefreshableView的实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4172483.html 需求:自定义一个ViewGroup,实现 ...

  7. [转]Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能

    版权声明:本文出自郭霖的博客,转载必须注明出处. 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到L ...

  8. fragment切换刷新 及下拉刷新

    此工程较BaiduLocationXMLFragmentDB相比:1.滑动fragment自动刷新该fragment2.下拉刷新fragment,上拉暂未实现 a.fragment切换刷新 1 . 由 ...

  9. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

随机推荐

  1. 怎样将Oracle数据库设置为归档模式及非归档模式

    怎样将Oracle数据库设置为归档模式及非归档模式 1.Oracle日志分类 分三大类: Alert log files--警报日志,Trace files--跟踪日志(用户和进程)和 redo lo ...

  2. Java基础面试操作题: 线程问题,写一个死锁(原理:只有互相都等待对方放弃资源才会产生死锁)

    package com.swift; public class DeadLock implements Runnable { private boolean flag; DeadLock(boolea ...

  3. Java中 Character方法练习:字符串中英文字母个数 5435abc54abc3AHJ5 正则:matches("[a-zA-Z0-9]{1}")

    package com.swift; public class String_Letter_Number_Test { public static void main(String[] args) { ...

  4. 自然数的拆分(DFS)

    题目描述: 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. 输入格式: 待拆分的自然数n. 输出格式: 若干数的加法式子. 样例输入: 7 样例输出: 1+1+1+1+1+1+1 1 ...

  5. Linux - mkdir -p a/b/c

    mkdir -p a/b/c -p  会循环创建

  6. 【laravel】Laravel 5 TokenMismatchException on PHP 5.6.9

    When I realized this was only happening in IE and Chrome, but not Firefox, it led me to the fix. The ...

  7. python2和python3,字典和json

    Python2的标准数据类型有: Numbers (数字) String (字符串) List (列表) Tuple (元组) Dictionary (字典) Python3的标准数据类型有: Num ...

  8. AreYouBusy HDU - 3535 (dp)

    AreYouBusy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. iOS 中的视图函数 init initwithnib viewDidLoad viewWillAppear的总结

    我要总结的函数主要是这几个: UIView *view-如果view还没有被初始化的话,getter方法会先调用[self loadView],如果getter或者setter方法被重写了,子类中的g ...

  10. Linux磁盘简介

    为一台服务器添加三块磁盘的体系结构情况 Linux系统中用free  -l 查看磁盘的状况 说明:   1)buffers为写入缓冲区,sync将缓冲区数据写入磁盘,cache为读出缓存. 2)cac ...