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

<!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. Nginx负载均衡总结2

    如果要支持健康检查需要开启health_check(好吧,这个是nginx plus版本才有的功能,plus是付费版) 还有一点,Windows的nginx不支持udp等协议,所以有一些测试还必须用l ...

  2. Nginx里的root/index/alias/proxy_pass的意思

    1.[alias] 别名配置,用于访问文件系统,在匹配到location配置的URL路径后,指向[alias]配置的路径.如: location /test/ { alias /home/sftp/i ...

  3. Git--远程仓库版本回退方法

    Git--远程仓库版本回退方法 1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回退版本? 如果提交了一个错误的 ...

  4. SQL语言(二)

    SQL约束与策略 create table student( id int primary key, //主键约束 name ) not null, //非空约束 idCard ) unique, / ...

  5. 基本数据类型和string的转换

  6. 『Python基础』第5节：条件控制

    if 语句的使用 单分支 if 条件: 满足条件后要执行的代码 例如: if 2 < 3: print(222) print(333) 每个条件后面都要使用冒号 :, 表示接下来是满足条件后要执 ...

  7. 接口中的方法都自动的被设置为public,接口中的域被自动设置为public static final

    接口中的方法都自动的被设置为public,接口中的域被自动设置为public static final

  8. pyrhon 第一个小购物车例子

    product_list=[[],[],[],[]] shopping_list=[] salary = input("请输入你的工资:") if salary.isdigit() ...

  9. java influx DB工具类

    配置 application-properties: spring.influxdb.url=${influxdb_host:127.0.0.1} spring.influxdb.port=${inf ...

  10. java -jar 参数前后位置说明

    springboot项目启动的时候可以直接使用java -jar xxx.jar这样.下面说说参数的一些讲究 1.-DpropName=propValue的形式携带,要放在-jar参数前面 eg:ja ...