纯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 相关文章推荐
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
Vue 请求传公共参数的操作
Jul 31 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python实现备份文件实例
2014/09/16 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python3中列表list合并的四种方法
2019/04/19 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python Map 函数的使用
2020/08/28 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
Java面试笔试题大全
2016/11/23 面试题
进修护士自我鉴定
2013/10/14 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
《落花生》教学反思
2014/02/25 职场文书
高中军训感想300字
2014/03/04 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
关于青春的演讲稿
2014/05/05 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
python for循环赋值问题
2021/06/03 Python
Tomcat弱口令复现及利用
2022/05/06 Servers