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

<!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. [转帖]TPC-C解析系列01_TPC-C benchmark测试介绍

    TPC-C解析系列01_TPC-C benchmark测试介绍 http://www.itpub.net/2019/10/08/3334/ 学习一下. 自从蚂蚁金服自研数据库OceanBase获得TP ...

  2. django使用pyecharts(3)----django加入echarts_定时全量更新

    三.Django 前后端分离_定时全量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...

  3. python技巧 — Chrome浏览器中的 XPath Helper

    用于XPath 爬取网页结构的时候使用, 安装后 快捷键调用 左边 ctrl+ shift+x 启动 安装流程: 1. 打开chrome浏览器,扩展程序 .搜索 XPath Helper 下载安装(前 ...

  4. windows下捕获本地回环网络中的报文RawCap

    一.下载地址: 官网地址:https://www.netresec.com/?page=RawCap 百度云:链接:https://pan.baidu.com/s/1mWCOTRF5XicuJitBA ...

  5. An unavoidable detour for home CodeForces - 814E (dp)

    大意: 给定一棵树每个点的度数, 求所有满足条件的树的个数 每个点到$1$的最短路唯一 假设$l_i$为点$i$到$1$的最短距离, 那么$l_i\ge l_{i-1}$ 每个点度数范围$2\le d ...

  6. MacBook Pro 安装composer及Yii2.0

    最近想看看Yii的一些东西,需要安装一下composer curl -sS https://getcomposer.org/installer | php 此操作会下载最新版本到当前的目录下 然后将下 ...

  7. Mybatis的实现原理

    在spring启动的时候,spring会根据我们配置的有关mapper.xml的路径加载此路径下的xml文件,得到一个List<Resource>的集合,然后将这个集合转化成Resourc ...

  8. DropDownList下拉控件

    <asp:DropDownList    ID="DropDownList1" runat="server" Width="177px" ...

  9. javascript原型原型链 学习随笔

    理解原型和原型链.需从构造函数.__proto__属性(IE11以下这个属性是undefined,请使用chrome调试).prototype属性入手. JS内置的好多函数,这些函数又被叫做构造函数. ...

  10. Java 之 IO流概述

    一.IO 流 我们知道存在硬盘中数据是永久保存的,而在内存中的数据只是临时的,内存中的数据可以存入硬盘中,硬盘中的数据也也可以读入内存中. 我们把这种数据的传输,可以看做一种数据的流动,按照流动的方法 ...