纯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也能包含文件
Oct 26 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 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
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
vue 过滤器filter实例详解
2018/03/14 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python datetime中strptime用法详解
2019/08/29 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python空元组在all中返回结果详解
2020/12/15 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
开工仪式主持词
2014/03/20 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
北京青年观后感
2015/06/15 职场文书
公司欠款证明
2015/06/24 职场文书
农村婚庆主持词
2015/06/29 职场文书
开工典礼致辞
2015/07/29 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
PL350与SW11的比较
2021/04/22 无线电
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang