纯javascript实现简单下拉刷新功能


Posted in Javascript onMarch 13, 2015

代码很简单,实现的功能却很实用,直接奉上代码

CSS:

<meta charset="utf-8" />

<title>Pull to Refresh</title>

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

<style>

div{

    position: absolute;

    top:0px;

    bottom:0px;

    width:100%;

    left:0px;

    overflow: hidden;

}

li{

    list-style-type: none;

    height:35px;

    background: #ccc;

    border-bottom: solid 1px #fff;

    text-align: left;

    line-height: 35px;

    padding-left:15px;

}

ul{

    width:100%;

    margin-top:0px;

    position: absolute;

    left:0px;

    padding:0px;

    top:0px;

}

</style>

HTML:

<div class="outerScroller">

    <ul class = 'scroll'>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li>10</li>

         <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li>10</li>

    </ul>

</div>

<script>

   var scroll = document.querySelector('.scroll');

   var outerScroller = document.querySelector('.outerScroller');

   var touchStart = 0;

   var touchDis = 0;

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

        var touch = event.targetTouches[0]; 

        // 把元素放在手指所在的位置 

           touchStart = touch.pageY; 

           console.log(touchStart);

        }, false);

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

        var touch = event.targetTouches[0]; 

        console.log(touch.pageY + 'px');  

        scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';

        console.log(scroll.style.top);

        touchStart = touch.pageY;

        touchDis = touch.pageY-touchStart;

        }, false);

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

        touchStart = 0;

        var top = scroll.offsetTop;

        console.log(top);

        if(top>70)refresh();

        if(top>0){

            var time = setInterval(function(){

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

              if(scroll.offsetTop<=0)clearInterval(time);

            },1)

        }

    }, false);

   function refresh(){

    for(var i = 10;i>0;i--)

        {

            var node = document.createElement("li");

            node.innerHTML = "I'm new";

            scroll.insertBefore(node,scroll.firstChild);

        }

   }

</script>

以上就是本文的全部内容了,希望对大家学习javascript能够有所帮助。

Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
详解JavaScript常量定义
Jan 03 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
javascript 跨域问题以及解决办法
Jul 17 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 #Javascript
node.js [superAgent] 请求使用示例
Mar 13 #Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 #Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 #Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 #Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 #Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 #Javascript
You might like
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Nodejs的express使用教程
2015/11/23 NodeJs
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python+django快速实现文件上传
2016/10/24 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python读取csv文件实例解析
2019/12/30 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
python suds访问webservice服务实现
2020/06/26 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
幸福家庭事迹材料
2014/02/03 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
班风学风建设方案
2014/05/06 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
国际贸易实训报告
2014/11/05 职场文书
公司年会晚会开幕词
2019/04/02 职场文书