1.wap下拉刷新丑陋版

<!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,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<title>下拉刷新</title>

</head>

<style>

    div{        width:100%;        overflow:hidden;    }

    .p{        height:40px;        position:absolute;        top:-40px;        left:0;    }

    div ul{        margin: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>

    <!--滑动绑定元素-->

    <p class="p">这是刷新的啊</p>

    <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 id="last">6</li>

        </ul>

    </div>

    <!--滑动绑定元素结束-->

    <div class="div"></div><!--页面元素-->

    <script>

        var _sroll = document.querySelector('.all');

        var outscroll = document.querySelector('.cont');

        var _p =  document.querySelector('.p');

        var _test = document.querySelector('#test');

        var _star = 0;  // 开始位置

        var _second=0;  //第二次位置

        var _move=0;   // 移动的位置

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

            var _touch = event.touches[0];

            _star = _touch.pageY;

            console.log("_star: "+_star);

        }, false);

        //获取滑动的距离，添加一个触摸滑动的监听事件

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

            //获取手指数组中的第一个（可以用targetTouches）

            _second=event.touches[0].pageY;

            console.log("_second: "+_second);

            //move 

            _move = _second-_star;

            console.log("move: "+_move);

            if(_move>0){

                outscroll.style.marginTop=_move+'px';

            }

            if(_move>20){

                _test.innerHTML = '<span style="color:red;">放开刷新</span>';

            }

        }, false);

        //添加屏幕触摸接触结束的事件

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

            outscroll.style.marginTop="0px";  // 你自己写动画让它慢慢缩回去呗。。。

            setTimeout(function(){

                document.getElementById("last").innerHTML="我刷新了";

            },2000);   // n 秒后 改变页面内容

        }, false);

    </script>

</body>

</html>

wap的更多相关文章

  1. wap支付宝接口的问题

    今天在支付宝接口开发时,遇到的两个坑 第一个: https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.8nHr4i& ...

  2. 淘宝WAP版小BUG分析

    前几天发现的一个淘宝WAP版的小BUG,就是用桌面版chrome看的时候产品评价中的图片显示不出来,都是图裂了. 这是什么原因呢?图片为什么会显示不出来呢?淘宝的技术人员.测试人员不可能没发现啊.开启 ...

  3. WAP站点(IIS/Apache)的服务器设置

    Server 端的设置IIS服务器:为了使IIS支持WAP(WML)页面的发布,在IIS的Web站点的属性 / HTTP信息中设置WAP的MIME属性,添加如下的MIME类型:扩展名 内容类型(MIM ...

  4. 支付宝WAP支付接口开发(Node/Coffee语言)

    此博客不更新很久了, 更新的文档在这, 有兴趣到这里围观: http://neutra.github.io/2013/%E6%94%AF%E4%BB%98%E5%AE%9DWAP%E6%94%AF%E ...

  5. 数据结构《21》----2014 WAP 初试题----Immutable queue

    2014 WAP初试题----实现一个不可变的队列: 看似很简单..实则,不同的版本效率的差距可能是巨大的..甚至难以想象.. 之前用STL库的queue进行了对比,差别非常大.. 用上一篇文章的im ...

  6. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  7. 也来谈谈wap端瀑布流布局

    Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...

  8. wap页面笔记

    wap页面是自行应页面 必须在head中加入 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1 ...

  9. JS判断是wap端访问网站还是PC端访问，然后进行自动跳转的代码

    <script type="text/javascript"> function goPAGE() { if ((navigator.userAgent.match(/ ...

随机推荐

  1. python远程连接paramiko 模块和堡垒机实现

    paramiko使用 paramiko模块是基于python实现了SSH2远程安全连接,支持认证和密钥方式,可以实现远程连接.命令执行.文件传输.中间SSH代理功能 安装 pip install pa ...

  2. Codeforces Round #342 (Div. 2) A. Guest From the Past（贪心）

    传送门 Description Kolya Gerasimov loves kefir very much. He lives in year 1984 and knows all the detai ...

  3. 山东第一届省赛1001 Phone Number（字典树）

    Phone Number Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 We know that if a phone numb ...

  4. HashMap Hasptable的区别

    HashTable的应用非常广泛,HashMap是新框架中用来代替HashTable的类,也就是说建议使用HashMap,不要使用HashTable.可能你觉得HashTable很好用,为什么不用呢? ...

  5. QT C1041错误

    使用QT Createor + MSVC2013写程序时.我复制了一份之前OK的代码到新的工程中,工程名字和之前的工程一样,出现了奇怪的错误.开始程序总是崩溃,后来我删掉shadow build目录, ...

  6. [Nhibernate]体系结构

    引言 在项目中也有用到过nhibernate但对nhibernate的认识,也存留在会用的阶段,从没深入的学习过,决定对nhibernate做一个系统的学习. ORM 对象-关系映射(OBJECT/R ...

  7. PHP数组

    PHP数组的遍历 使用for语句循环遍历数组 在PHP中,不仅可以指定非连续的数字索引值,而且还存在以字符串为下表的关联数组.所以在php中很少使用for语句循环来遍历数组.使用for语句遍历连续数字 ...

  8. 在Activity之间传递参数(三)——serializable和parcelable的区别

    传递值对象: 一.serializable实现:简单易用 serializable的迷人之处在于你只需要对某个类以及它的属性实现Serializable 接口即可.Serializable 接口是一种 ...

  9. 【转载】使用Pandas进行数据提取

    使用Pandas进行数据提取 本文转载自:蓝鲸的网站分析笔记 原文链接:使用python进行数据提取 目录 set_index() ix 按行提取信息 按列提取信息 按行与列提取信息 提取特定日期的信 ...

  10. linux下实现在程序运行时的函数替换(热补丁)

    声明:以下的代码成果,是参考了网上的injso技术,在本文的最后会给出地址,同时非常感谢injso技术原作者的分享. 但是injso文章中的代码存在一些问题,所以后面出现的代码是经过作者修改和检测的. ...