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. P2有什么用

    今天我们学习第二个主题:组织主题 PRINCE2中指出,发起项目的组织需要将工作分配给各级经理,负责推进项目指导完成.项目是跨职能的,因此正常的直线型职能机构并不适合项目,组织主题描述了为有效管理项目 ...

  2. Akka框架使用注意点

    1.mailbox Akka的每个actor默认有一个mailbox,按照FIFO顺序单线程处理.在抛出异常导致父actor根据设置的监管策略执行重启或恢复操作时,会从触发异常的消息的后续消息开始处理 ...

  3. ionic ios发布图标启动也不能正确加载问题

    前两天发布ios的时候发现ios安装的图标和启动页的时候不能正确显示,重新发布也不能正确显示,修改方法 在ionic build ios --release之前执行ionic resources即可

  4. python学习笔记-（十四）进程&协程

    一. 进程 1. 多进程multiprocessing multiprocessing包是Python中的多进程管理包,是一个跨平台版本的多进程模块.与threading.Thread类似,它可以利用 ...

  5. matlab 有趣小细节

    图像的默认显示方式,坐标从1开始计数.是从左向右,从上到下为正,分别为x和y轴          如果加入x轴和y轴画成成的格子,起始位置并不是严格的左上角,而是像素的中心点,并不是以像素的边缘画格子 ...

  6. 在Application中集成Microsoft Translator服务之使用http获取服务

    一.创建项目 首先我们来创建一个ASP.NET Application 选择时尚时尚最时尚的MVC,为了使演示的Demo更简单,这里选择无身份验证 二.创建相关类 项目需要引入之前两个类AdmAcce ...

  7. windows 10卸载自带软件

    http://jingyan.baidu.com/article/14bd256e4ad268bb6c26126d.html http://jingyan.baidu.com/album/ae97a6 ...

  8. [译] 你该知道的javascript作用域 (javascript scope)(转)

    javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...

  9. tyvj1198 最优矩阵连乘

    描述    一个n*m矩阵由n行m列共n*m个数排列而成.两个矩阵A和B可以相乘当且仅当A的列数等于B的行数.一个N*M的矩阵乘以一个M*P的矩阵等于一个N*P的矩阵,运算量为nmp.   矩阵乘法满 ...

  10. 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化

    微信服务号模板消息可以向用户发送重要的服务通知,如信用卡刷卡通知,商品购买成功通知等.昨日,微信团队发布公告称模板消息新增“设置行业”和“添加模板”接口及细节优化,详细变动如下 模板消息[业务通知]自 ...