这两天做项目，用到了上滑和下拉的功能，主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态。

同时加一个知识点：有时在监听时会报错，这个错是这样子的：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080；

这种错误出现的原因，大家可以点击这个链接https://segmentfault.com/a/1190000008512184 去看一下，写的挺好的

这里呢，我就直接把代码贴一下。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <meta name="viewport" content="width=640, user-scalable=no">

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="Cache-Control" content="no-cache">

    <meta http-equiv="Expires" content="0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="format-detection" content="telephone=no">

    <meta name="apple-mobile-web-app-title" content="">

    <title>H5-test</title>

    <link href="css.css" rel="stylesheet" />

</head>

<body>

<div class="page_box">

    <div class="page page1">

        <div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

            <div>11111111111</div>

        </div>

    </div>

    <div class="page page2 hide">

        <div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

            <div>22222222222</div>

        </div>

    </div>

    <div class="page page3 hide">

        <div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

            <div>33333333333</div>

        </div>

    </div>

    <div class="page page4 hide">

        <div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

            <div>44444444444</div>

        </div>

    </div>

    <div class="page page5 hide">

        <div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

            <div>55555555555</div>

        </div>

    </div>

    <div class="page page6 hide">

        <div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

            <div>66666666666</div>

        </div>

    </div>

</div>

<div class="arrow">∧</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

    document.addEventListener("touchmove", function(e){

        e.preventDefault();

    } , false,{ passive: true });

    var curPage = 1;

    var PageL = $('.page_box .page').length;

    var canTouch = false;

    canTouch = true;

    var startY , endY , diff;

    document.body.addEventListener("touchstart", touchStart, false,{ passive: true });

    document.body.addEventListener("touchmove", touchMove, false,{ passive: true });

    document.body.addEventListener("touchend", touchEnd, false,{ passive: true });

    function touchStart(e){

        var touch = e.touches[0];

        startY = touch.pageY;

    }

    function touchMove(e){

        //e.preventDefault();

        var touch = e.touches[0];

        endY = touch.pageY;

        diff = endY - startY;

    }

    function touchEnd(e){

        if(Math.abs(diff) > 150 && canTouch){

            if(diff > 0){

                if(curPage <= 1){

                    return;

                }

                $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');

                curPage--;

                $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');

            }else{

                if(curPage >= PageL){

                    return;

                }

                $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');

                curPage++;

                $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');

                if(curPage >= PageL){

                    $('.arrow').hide();

                }else{

                    $('.arrow').show();

                }

            }

            canTouch = false;

            setTimeout(function(){

                canTouch = true;

                diff = 0;

                $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');

            },1000);

        }

    }

</script>

</body>

</html>

　　css样式

@charset "utf-8";

*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}

html{ max-width:640px; margin:0 auto;}

body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;

    -webkit-user-select:none; user-select:none;

    -webkit-touch-callout:none; touch-callout:none;

}

html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}

.page{ background:url(data:image/jpg;base64,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) repeat-y; background-size:100%;}

.page{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}

.page.hide{ display:none;}

/*==================================*/

.page.inTop{

    -webkit-animation:ShowTop .5s ease-out both;

    animation:ShowTop .5s ease-out both;

}

.page.outTop{

    -webkit-animation:HideTop .5s ease-out both;

    animation:HideTop .5s ease-out both;

}

.page.inDown{

    -webkit-animation:ShowDown .5s ease-out both;

    animation:ShowDown .5s ease-out both;

}

.page.outDown{

    -webkit-animation:HideDown .5s ease-out both;

    animation:HideDown .5s ease-out both;

}

@-webkit-keyframes ShowTop{

    0%{ -webkit-transform:translateY(100%);}

    100%{ -webkit-transform:translateY(0);}

}

@keyframes ShowTop{

    0%{ transform:translateY(100%);}

    100%{ transform:translateY(0);}

}

@-webkit-keyframes HideTop{

    0%{ -webkit-transform:translateY(0);}

    100%{ -webkit-transform:translateY(-100%);}

}

@keyframes HideTop{

    0%{ transform:translateY(0);}

    100%{ transform:translateY(-100%);}

}

@-webkit-keyframes ShowDown{

    0%{ -webkit-transform:translateY(-100%);}

    100%{ -webkit-transform:translateY(0);}

}

@keyframes ShowDown{

    0%{ transform:translateY(-100%);}

    100%{ transform:translateY(0);}

}

@-webkit-keyframes HideDown{

    0%{ -webkit-transform:translateY(0);}

    100%{ -webkit-transform:translateY(100%);}

}

@keyframes HideDown{

    0%{ transform:translateY(0);}

    100%{ transform:translateY(100%);}

}

/*==================================*/

.arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#d00; position:absolute; left:285px; bottom:10px;

    -webkit-animation:arrow 1.2s .5s ease-in-out infinite;

    animation:arrow 1.2s .5s ease-in-out infinite;

}

@-webkit-keyframes arrow{

    0%{ -webkit-transform:translateY(0); opacity:1;}

    100%{ -webkit-transform:translateY(-50%); opacity:0}

}

@keyframes arrow{

    0%{ transform:translateY(0); opacity:1;}

    100%{ transform:translateY(-50%); opacity:0}

}

/*==================================*/

.page > div > div:nth-child(1){

    -webkit-animation:fadeRightTan .8s .2s ease-in-out both;

    animation:fadeRightTan .8s .2s ease-in-out both;

}

.page > div > div:nth-child(2){

    -webkit-animation:fadeRightTan .8s .7s ease-in-out both;

    animation:fadeRightTan .8s .7s ease-in-out both;

}

.page > div > div:nth-child(3){

    -webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;

    animation:fadeRightTan .8s 1.2s ease-in-out both;

}

.page > div > div:nth-child(4){

    -webkit-animation:fadeRightTan .8s 1.7s ease-in-out both;

    animation:fadeRightTan .8s 1.7s ease-in-out both;

}

.page > div > div:nth-child(5){

    -webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;

    animation:fadeRightTan .8s 2.2s ease-in-out both;

}

.page > div > div:nth-child(6){

    -webkit-animation:fadeRightTan .8s 2.7s ease-in-out both;

    animation:fadeRightTan .8s 2.7s ease-in-out both;

}

.page > div > div:nth-child(7){

    -webkit-animation:fadeRightTan .8s 3.2s ease-in-out both;

    animation:fadeRightTan .8s 3.2s ease-in-out both;

}

.page > div > div:nth-child(8){

    -webkit-animation:fadeRightTan .8s 4.7s ease-in-out both;

    animation:fadeRightTan .8s 4.7s ease-in-out both;

}

.page > div > div:nth-child(9){

    -webkit-animation:fadeRightTan .8s 5.2s ease-in-out both;

    animation:fadeRightTan .8s 5.2s ease-in-out both;

}

.page > div > div:nth-child(10){

    -webkit-animation:fadeRightTan .8s 5.7s ease-in-out both;

    animation:fadeRightTan .8s 5.7s ease-in-out both;

}

@-webkit-keyframes fadeRightTan{

    0%{ -webkit-transform:translateX(100%); opacity:0;}

    70%{ -webkit-transform:translateX(-5%); opacity:1;}

    80%{ -webkit-transform:translateX(2%); opacity:1;}

    90%{ -webkit-transform:translateX(-2%); opacity:1;}

    100%{ -webkit-transform:translateX(0); opacity:1;}

}

@keyframes fadeRightTan{

    0%{ transform:translateX(100%); opacity:0;}

    70%{ transform:translateX(-5%); opacity:1;}

    80%{ transform:translateX(2%); opacity:1;}

    90%{ transform:translateX(-2%); opacity:1;}

    100%{ transform:translateX(0); opacity:1;}

}

　　

js实现页面的上滑下拉功能的更多相关文章

  1. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  2. Swiper 判断上滑下拉操作

    onTouchMove: function(swiper){ //手动滑动中触发//判断上滑下拉var i = mySwiper.translate;setTimeout(function() {va ...

  3. jQuery点击页面其他部分隐藏下拉菜单

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...

  4. 让Jayrock插上翅膀（加入输入输出参数注释，测试页面有注释，下拉框可以搜索）

    继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...

  5. jsp页面上的下拉框案例(Struts2)

    <s:select></s:select>包含的属性有:list=""  :name=""  :value=""   ...

  6. FineReport——JS二次开发（隐藏下拉框控件的倒三角）

    在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...

  7. js不是从上到下执行的吗？

    如果说js是从上到下解释执行的, 那么,按道理应该会执行错误前面的代码. 如: [代码一] //输出1,2,到3报错 console.log("一") console.log(&q ...

  8. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [Ext JS 4] 实战之多选下拉单 (带checkbox)

    前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...

随机推荐

  1. Java for LeetCode 097 Interleaving String 【HARD】

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example, Given: s1 ...

  2. [LeetCode] 698. Partition to K Equal Sum Subsets

    Problem Given an array of integers nums and a positive integer k, find whether it's possible to divi ...

  3. <算法笔记>关于快速排序的算法优化排序（顺便给百度百科纠个错）

    快速排序是排序算法之中的基本中的基本,虽然越来越多的接口函数将快速排序“完美的封装了起来”,比如C++中的qsort或者<algorithm>中的sort(与stable_sort相对应) ...

  4. 深入理解JVM - Java内存区域与内存溢出异常 - 第二章

    一 运行时数据区域 JVM在执行Java程序的过程中会把它管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间. 程序计数器 程序计数器(Program Counter ...

  5. 我所理解的RESTful Web API [设计篇]【转】

    原文:http://www.cnblogs.com/artech/p/restful-web-api-02.html <我所理解的RESTful Web API [Web标准篇]>Web服 ...

  6. 集群 openfire

    openfire_3.8.2集群配置 测试机4台1.四台机器都安装openfire,随即一台安装mysql,执行openfire_mysql.sql脚本.2.四台机器都配置到同一个mysql机器上(不 ...

  7. zjoi2015d1题解

    闲来无事做了丽洁姐姐的题 t1给一棵树 每个点有点权 每次修改点权 修改后询问每个点到树的带权重心的带权距离是多少 每个点度数不超过20 很显然的一个点分树... 我们记一下 每个点的子树中的所有点到 ...

  8. MySQL-with rollup函数运用 _20160930

    在博客里http://www.cnblogs.com/Mr-Cxy/p/5898839.html提到了行转列, 如果想在下面这个表下面添加一行 总计 数据行SQL代码怎么实现 并且根据9月金额进行城市 ...

  9. 【Lintcode】070.Binary Tree Level Order Traversal II

    题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...

  10. css 跳转电脑分辨率

    因为我们经常在项目中要适配各种屏幕,为了方便前端的开发和测试.我们可以直接把电脑的分辨率调整到需要适配的最小的分辨率,其实还有一种更直接粗暴的方法.直接按F12打开控制台,在收拉浏览器就能看到目前的分 ...