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. 冰冻三尺非一日之寒-socket

    第八章 Socket语法及相关 SocketServer实现多并发 socket概念: 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket又称&q ...

  2. 在php中验证复选框

    PHP接收多个同名复选框信息不像ASP那样自动转换成为数组,这给使用带来了一定不便.但是还是有解决办法的,就是利用javascript做一下预处理.多个同名复选框在javascript中还是以数组的形 ...

  3. 解决：Win 10 + Mint 18双系统时间不同步，更换系统启动项顺序

    1.win10 & mint 18双系统时间同步: 先打开终端下更新一下时间,确保时间无误: sudo apt-get install ntpdate sudo ntpdate time.wi ...

  4. SpringBoot源码解析：tomcat启动分析

    >> spring与tomcat的启动分析:war包形式 tomcat:xml加载规范 1.contex-param: 初始化参数 2.listener-class: contextloa ...

  5. JS-抽奖系统-实现原理

    有本事中奖的,过来找我换红包!!哈哈!! <meta charset="UTF-8"> <title>抽奖系统</title> <styl ...

  6. 查看修改Linux时区和时间

    查看/修改Linux时区和时间 一.时区 1. 查看当前时区 date -R 2. 修改设置时区 方法(1) tzselect 方法(2) 仅限于RedHat Linux 和 CentOS timec ...

  7. github提交代码时,报permission denied publickey

    在像github提交代码时,报permission denied publickey. 查找了一下,可能是因为github的key失效了. 按照以下步骤,重新生成key. ssh-keygen 一路默 ...

  8. go智能提示（重要）

    使用VIM开发go程序时,智能提示是一个大问题. 最终解决方案是使用 YCM,它是使用 gocode 来进行智能提示的.一切配置好之后,你会发现标准库和第三方库都可以智能提示,但自己写的包却不能,猜想 ...

  9. Java与MySQL的连接

    下载数据库驱动文件,解压并保存至任意位置 下载地址 新建Java项目,并将驱动文件添加到项目中 项目名右键-->构建路径-->配置构建路径-->添加外部Jar 在项目中新建类,编写代 ...

  10. JSon 对象转字符的一些方法

    引用System.Web.Entity.dll public static string ToJSON(this object obj) { JavaScriptSerializer serializ ...