废话不多说，直接上代码，这里感谢我的好朋友，豆姐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

<title>下拉刷新</title>

</head>

<style>

div{

width:100%;

overflow:hidden;

}

div ul{

margin:0;

position:absolute;

top:-40px;

left:0;

width:100%;

padding:0;

}

div ul li{

list-style-type:none;

text-align:center;

border-bottom:1px solid #999;

line-height:40px;

margin:0;

}

.div{

height:1000px;

width:100%;

background:#F00;

margin-top:500px;

}

</style>

<body>

<!--滑动绑定元素 cont需要定位-->

<div class="all">

    <ul class="cont">

        <li><img src="../refresh/slide-up-down/slide-up-down/2787117_161300358107_1.gif" height="20"></li>

        <li><span id="test">下拉刷新</span></li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</div>

<!--滑动绑定元素结束-->

<div class="div"></div><!--页面元素-->

<script>

    var _sroll = document.querySelector('.all');

    var outscroll = document.querySelector('.cont');

    var _test = document.querySelector('#test');

    var _star = 0;

    //获取手指最初的位置,添加一个触摸开始的监听事件

    _sroll.addEventListener('touchstart',function(event){

    //获取手指数组中的第一个（可以用targetTouches）

    var _touch = event.touches[0];

        //获取滑动时手指的y坐标+

        _star = _touch.pageY;

    }, false);

    //获取滑动的距离，添加一个触摸滑动的监听事件

    _sroll.addEventListener('touchmove',function(event){

    //获取手指数组中的第一个（可以用targetTouches）

        var _touch = event.touches[0];

        outscroll.style.top = outscroll.offsetTop + _touch.pageY-_star + 'px';

        //获取滑动后手指的y坐标

        _star = _touch.pageY;

        _test.innerHTML = '放开刷新';

    }, false);

    //添加屏幕触摸接触结束的事件

    _sroll.addEventListener('touchend',function(event){

        //初始化手指触摸的y坐标

        _star = 0;

        //获取下拉元素的top值

        var top = outscroll.offsetTop;

        //如果大于40就刷新

        if(top>0){

        //循环慢慢的收缩

        var time = setInterval(function(){

            outscroll.style.top = outscroll.offsetTop -2+'px';

                //如果top等于原始值，停止收缩

                if(outscroll.offsetTop<=-40){

                    clearInterval(time);

                    //刷新页面

                    location.reload();

                }

            },1);

        }

    }, false);

</script>

</body>

</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. Git使用总结（三）：协同开发常见冲突

    1.不同人修改了不同的文件 a.账户A,账户B分别从远端拉取了相同分支     b.账户A修改了main.cpp文件后提交到远端,账户B修改fun.cpp文件提交远端时会报如下错误           ...

  2. 转：数据库实例自动crash并报ORA-27157、ORA-27300等错误

    rhel7.2上安装12C RAC数据库后,其中一个数据库实例经常会自动crash.查看alert日志发现以下错误信息: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Errors ...

  3. python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）

    11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...

  4. 综合应用，jieba,去标点，分词保存，统计，删词，输出

    import jieba fp1=r'D:/python/a.txt' outph=r'D:/python/out.txt' f=open(fp1,'r',encoding='utf-8') txt= ...

  5. JDBC连接池的testQuery/validationQuery设置

    在<Tomcat中使用Connector/J连接MySQL的超时问题>帖子中想要增加对连接池中连接的测试/验证,防止数据库认为连接已死而Web应用服务器认为连接还有效的问题,Mysql文档 ...

  6. Spring Boot集成Junit测试

    添加依赖: 在测试类上添加注解:

  7. RMAN备份，catalog注册rman带库备份信息

    客户需求:测试恢复的过程中,控制文件是全备时期的,recover database无法恢复到指定日期,控制文件中缺失后续新的归档备份信息. 方法:1.控制文件rman注册后续带库中的归档备份: 2.使 ...

  8. flutter从入门到精通三

    flutter可以通过一套代码运行在多个平台上,包括移动,web,桌面,嵌入式,但是在 Web 平台的支持尚未达到 Beta 阶段,请不要用在生产环节,在阅读文档时候,推荐大家阅读https://fl ...

  9. C# 微信消息模板 发送

    项目要用到微信提醒 ,加上调转到小程序页面,或者 指定url 用到  RestSharp.Senparc.Weixin 类库 一开始直接照着微信示例直接post进去 发现一直提示 47001  ,估计 ...

  10. kvm第四章-- 虚拟化网络管理