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. 【BZOJ-3643】Phi的反函数 数论 + 搜索

    3643: Phi的反函数 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 141  Solved: 96[Submit][Status][Discuss ...

  2. JAVA 技术手册 卷1 第十四章『多线程』 读书摘要

    什么是线程 进程受CPU时间片的轮转调度,进而予人多任务并发的感觉. 线程在更低层次上扩展多任务概念,一个进程通常包含多个线程. 进程各自数据独立,而线程共享数据. 数据独立使进程相互通信变得繁难,共 ...

  3. Extjs 知识体系1-dom操作

    操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...

  4. ReactNative 当前url和cookies的获取

    前面大概介绍了react-native的运行helloword级别的入门,所以之后简单的东西就不写了,毕竟官网上都能够找到. reactnative官网:https://facebook.github ...

  5. Java内存与垃圾回收调优

     Java(JVM)内存模型 正如你从上面的图片看到的,JVM内存被分成多个独立的部分.广泛地说,JVM堆内存被分为两部分——年轻代(Young Generation)和老年代(Old Generat ...

  6. mysql关联表的复制

    1. 复制被参照的表: CREATE TABLE clone_product_1 LIKE product_1; INSERT INTO clone_product_1 SELECT * FROM p ...

  7. web前端基础知识-（二）CSS基本操作

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  8. c# .Net :Excel NPOI导入导出操作教程之List集合的数据写到一个Excel文件并导出

    将List集合的数据写到一个Excel文件并导出示例: using NPOI.HSSF.UserModel;using NPOI.SS.UserModel;using System;using Sys ...

  9. HTTP超文本传输协议-HTTP/1.1中文版

    摘要 超文本传输协议(HTTP)是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议.它是一种通用的,不分状态(stateless)的协议,除了诸如名称服务和分布对象管理系统之类的超文本用途外 ...

  10. awk删除文件第一列

    awk删除文件第一列 1.采用awk awk '{$1="";print $0}' file 2.采用sed sed -e 's/[^]* //' file sort -R fil ...