1. 废话不多说，直接上代码，这里感谢我的好朋友，豆姐
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
  4. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
  5. ">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
  10. <title>下拉刷新</title>
  11. </head>
  12. <style>
  13. div{
  14. width:100%;
  15. overflow:hidden;
  16. }
  17. div ul{
  18. margin:0;
  19. position:absolute;
  20. top:-40px;
  21. left:0;
  22. width:100%;
  23. padding:0;
  24. }
  25. div ul li{
  26. list-style-type:none;
  27. text-align:center;
  28. border-bottom:1px solid #999;
  29. line-height:40px;
  30. margin:0;
  31. }
  32. .div{
  33. height:1000px;
  34. width:100%;
  35. background:#F00;
  36. margin-top:500px;
  37. }
  38. </style>
  39. <body>
  40. <!--滑动绑定元素 cont需要定位-->
  41. <div class="all">
  42.     <ul class="cont">
  43.         <li><img src="../refresh/slide-up-down/slide-up-down/2787117_161300358107_1.gif" height="20"></li>
  44.         <li><span id="test">下拉刷新</span></li>
  45.         <li>2</li>
  46.         <li>3</li>
  47.         <li>4</li>
  48.         <li>5</li>
  49.         <li>6</li>
  50.     </ul>
  51. </div>
  52. <!--滑动绑定元素结束-->
  53. <div class="div"></div><!--页面元素-->
  54. <script>
  55.     var _sroll = document.querySelector('.all');
  56.     var outscroll = document.querySelector('.cont');
  57.     var _test = document.querySelector('#test');
  58.     var _star = 0;
  59.     //获取手指最初的位置,添加一个触摸开始的监听事件
  60.     _sroll.addEventListener('touchstart',function(event){
  61.     //获取手指数组中的第一个（可以用targetTouches）
  62.     var _touch = event.touches[0];
  63.         //获取滑动时手指的y坐标+
  64.         _star = _touch.pageY;
  65.     }, false);
  66.     //获取滑动的距离，添加一个触摸滑动的监听事件
  67.     _sroll.addEventListener('touchmove',function(event){
  68.     //获取手指数组中的第一个（可以用targetTouches）
  69.         var _touch = event.touches[0];
  70.         outscroll.style.top = outscroll.offsetTop + _touch.pageY-_star + 'px';
  71.         //获取滑动后手指的y坐标
  72.         _star = _touch.pageY;
  73.         _test.innerHTML = '放开刷新';
  74.     }, false);
  75.     //添加屏幕触摸接触结束的事件
  76.     _sroll.addEventListener('touchend',function(event){
  77.         //初始化手指触摸的y坐标
  78.         _star = 0;
  79.         //获取下拉元素的top值
  80.         var top = outscroll.offsetTop;
  81.         //如果大于40就刷新
  82.         if(top>0){
  83.         //循环慢慢的收缩
  84.         var time = setInterval(function(){
  85.             outscroll.style.top = outscroll.offsetTop -2+'px';
  86.                 //如果top等于原始值，停止收缩
  87.                 if(outscroll.offsetTop<=-40){
  88.                     clearInterval(time);
  89.                     //刷新页面
  90.                     location.reload();
  91.                 }
  92.             },1);
  93.         }
  94.     }, false);
  95. </script>
  96. </body>
  97. </html>

原生js手机端触摸下拉刷新的更多相关文章

  1. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  2. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  3. js：基于原生js的上啦下啦刷新功能

    链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body> <d ...

  4. 基于Vue手写一个下拉刷新

    当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...

  5. 使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。

    套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”.真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现下拉刷新 ...

  6. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  7. 原生js实现简单的下拉加载

    #获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...

  8. js上拉加载、下拉刷新的插件

    之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...

  9. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

随机推荐

  1. eclipse设置text file encoding UTF-8和文件的换行符 Unix 格式

    阿里华山版java开发手册代码格式第10条: 步骤:1.Window - Preferences, 2.左边选择 General - Workspace , 3.右边Text file encodin ...

  2. STM32之串口硬件连接图

    笔记本USB转串口实物连接图: 电路连接图:

  3. C++根据用户输入打印对应的金层塔层数

    #include <iostream> #include <Windows.h> using namespace std; int main(void) { int row; ...

  4. golang之new函数

    另一个创建变量的方法是调用用内建的new函数.表达式new(T)将创建一个T类型的匿名变量,初始化为T类型的零值,然后返回变量地址,返回的指针类型为 *T . p := new(int) // p, ...

  5. jquery封装的方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. 偶数矩阵 Even Parity,UVa 11464

    题目描述 Description 给你一个n*n的01矩阵(每个元素非0即1),你的任务是把尽量少的0变成1,使得每个元素的上.下.左.右的元素(如果存在的话)之和均为偶数.如图所示的矩阵至少要把3个 ...

  7. shell 学习笔记2-shell-test

    一.字符串测试表达式 前面一篇介绍:什么是shell,shell变量请参考: shell 学习笔记1-什么是shell,shell变量 1.字符串测试表达式参数 字符串需要用""引 ...

  8. （转） [组合数学] 第一类，第二类Stirling数，Bell数

    一.第二类Stirling数 定理:第二类Stirling数S(p,k)计数的是把p元素集合划分到k个不可区分的盒子里且没有空盒子的划分个数. 证明:元素在哪些盒子并不重要,唯一重要的是各个盒子里装的 ...

  9. 每周分享五个 PyCharm 使用技巧（三）

    文章首发于 微信公众号:Python编程时光 PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. 一个每天都在使用的工具,如果能掌 ...

  10. VBA Excel对象（十九）

    使用VBA进行编程时,用户将要处理的重要对象很少.下面是一些常见的对象 - 应用程序对象 工作簿对象 工作表对象 范围对象 应用程序对象 应用程序对象由以下部分组成 - 应用程序范围的设置和选项. 返 ...