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. 基于NFS的分布式持久化

    基于容器的微服务架构中,分布式持久化方案并没有一个默认的最好方案,这里使用NFS来作为容器持久化方案. NFS服务需要在服务器及需要挂载的客户端上分别安装配置. nfs-utils包含服务: rpcb ...

  2. 文件操作之FileOpenPicker、FileSavePicker和FolderPicker

    Win10的开发经常需要进行文件的操作,因此文件的选择对话框FileOpenPicker.文件保存对话框FileSavePicker以及文件夹选择对话框FolderPicker十分重要.这三者的操作也 ...

  3. MacTalk阅读有感

    MacTalk by 池建强 高手的思维境界 -贴地气 -有思想 技术普及 文字是表达人思想的载体,池老师将自己的经历,经验分享给大家,很值得大家学习,虽然我只是个初出茅庐的小菜,现在有指路明灯一样. ...

  4. iOS 个人账号 iOS APP Development 灰色不可选

    如图,现在的开发者账号是有几个人共用的,已经 生成了一个Development 的证书,我想再申请一个,出现了这样的情况.网上有说的是申请证书个数到了上限,需要删除已经生成的.因为生成的证书其他人需要 ...

  5. 关于WEB项目的一点想法

    有点失落.迷茫,差点在上班的时候发了火.原因是之前离职的一位同事,在代码里不加注释,而且百般偷懒,致使很多应该的验证没有验证,很多应该考虑到的情况没有考虑.因为是老员工,我相比他来说是新员工.气势上总 ...

  6. Linux系统下压缩文件时过滤指定的文件 |Linux系统压缩指定文件代码

    进入要压缩的目录: [root@iZ25c748tjqZ wechat]# cd /alidata1/htdocs/wechat/ 查看目录: [root@iZ25c748tjqZ wechat]# ...

  7. python2-gst0.10制作静态包的补丁

    gst制作成了静态库,而python2的gst有多个动态库引用gst的库 因此,想了一个办法将python2所需要的gst打包成一个单独的共享库 办法就是,将python2_gst所有的.so先制作成 ...

  8. 同一网站中HTML相对路径引用

    ../表示目录的上一级 如:一个网站文件夹text里有HTML,JS,CSS....文件夹,HTML文件夹有个text.html, JS文件夹有个text.js, CSS文件夹中有个text.css. ...

  9. 《JavaScript DOM编程艺术（第二版）》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  10. Java Web笔记之Servlet(1)

    今天在学习Servlet时,使用浏览器显示的网页效果与预期的有差异,仔细查找发现实<!DOCTYPE>声明的问题,截图如下: 代码如下: package secondServlet; im ...