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

<!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. 将linux的root用户的家目录由/root切换为/home/root

    步骤1,先以root登录,然后创建目录/home/root步骤2,vi /etc/passwd里root用户的家目录为/home/root:步骤3,cp -rf /root/ /home/将原来的ro ...

  2. EFCore 通过实体Model生成创建SQL Server数据库表脚本

    在我们的项目中经常采用Model First这种方式先来设计数据库Model,然后通过Migration来生成数据库表结构,有些时候我们需要动态通过实体Model来创建数据库的表结构,特别是在创建像临 ...

  3. JUC之原子类

    在分析原子类之前,先来了解CAS操作 CAS CAS,compare and swap的缩写,中文翻译成比较并交换. CAS 操作包含三个操作数 —— 内存位置(V).预期原值(A)和新值(B).如果 ...

  4. Android广播机制——初体验

    写在前面的话 文章为笔者自己理解 . -如有错误,欢迎指正- <第一行代码>读书笔记 写于2017年10月16日17:00:40 (一). 安卓广播的分类 a.标准广播 标准广播发出以后, ...

  5. Git和Github的介绍、简单操作、冲突（上）

    目的:   1.git与github简介  2.Git与SVN区别 3.Github 的简单使用 4.下载安装Git-20-64-bit.exe   5.Git常用命令 5.1Git命令使用场景 5. ...

  6. python入门-windows下anaconda环境搭建

    1. anaconda下载 根据根据自己系统下载32位还是64位,还有版本 python3.6——64bit python3.6——32bit python2.7——64bit python2.7—— ...

  7. VSCode 搭建 React Native 环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行 ...

  8. stm32内联汇编

    首先,先看一下mdk下的混合编程的基本方法: 使用如上方法就可以进行混合编程了. 但是要特殊注意一点,个人感觉这个是直接调用一个代码段,并非一个函数,因为他不会保护调用这个代码段之前的现场.比如: 在 ...

  9. node.js 微信开发3-网页授权

    1.配置公众号的自定义菜单,如 { "button":[ { "type":"view", "name":"公 ...

  10. sed 追加文件内容

    追加用法总结 1.a 在匹配行后面追加 2.i 在匹配行前面追加 3.r 将文件内容追加到匹配行后面 4.w 将匹配行写入指定文件 在匹配行后面追加 a passwd文件第10行后面追加"A ...