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

<!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. python基础学习（九）

    19.解包 # 解包 unpacking user1 = ["张三", 21, "1999.1.1"] # tuple 类型 user2 = ("李四 ...

  2. linux服务器安装tomcat

    linux服务器安装tomcat 准备: 下载一个tomcat,官网连接:http://tomcat.apache.org/ 版本选择合适的 安装tomcat之前要先安装Java jdk 可以参考我的 ...

  3. Mysql 定时备份(mysqldump)

    #!/bin/bash today=`date +%Y-%m-%d` deleday=`date -d '7 day ago' +%Y-%m-%d` path=/home/data/mysqlback ...

  4. Linux 基础 目录介绍

    /bin           存放二进制可执行文件(ls  cat   clear)等等 ,常用基础命令在这个目录下 /etc           存放系统管理和配置文件   如 passwd   用 ...

  5. nginx 禁止浏览器缓存

    如果我们使用Nginx作为静态资源服务器,那么可以使用expires进行缓存控制. location /{ expires 1s; } 如果Get页面未做任何修改,服务器就是对客户端返回304 Not ...

  6. 开源微信小程序商城测评

    1. Java版 1)微同商城 减少重复造轮子,开源微信小程序商城 .快速搭建一个属于自己的微信小程序商城. 官网地址:https://fly2you.cn 开源地址:https://gitee.co ...

  7. 滤波器算法（2）-最小均方（LMS）

    2018.09.09 写的版本 ①残差平方和 ②平方损失函数: ③函数的极值点为偏导数为0的点:(将问题变成一个求极值的问题) ④求解得: matlab代码: ① y=ax+b+e方程 functio ...

  8. 扩展支持全选的CheckBox列。

    扩展支持全选的CheckBox列. https://www.codeproject.com/articles/42437/toggling-the-states-of-all-checkboxes-i ...

  9. Java帖子

    IDEA新手使用教程(详解):https://cloud.tencent.com/developer/article/1448115 Java学习文档:https://www.sxt.cn/Java_ ...

  10. Pytorch 1.0升级到Pytorch 1.1.0

    Pytorch 1.0Pytorch 1.0于2018-12-8发布,详见https://github.com/pytorch/pytorch/releases/tag/v1.0.0 主要更新JIT全 ...