js实现页面的上滑下拉功能

这两天做项目，用到了上滑和下拉的功能，主要是通过监听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实现页面的上滑下拉功能的更多相关文章

ios position:fixed 上滑下拉抖动
ios position:fixed 上滑下拉抖动最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...
Swiper 判断上滑下拉操作
onTouchMove: function(swiper){ //手动滑动中触发//判断上滑下拉var i = mySwiper.translate;setTimeout(function() {va ...
jQuery点击页面其他部分隐藏下拉菜单
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
让Jayrock插上翅膀（加入输入输出参数注释，测试页面有注释，下拉框可以搜索）
继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...
jsp页面上的下拉框案例(Struts2)
<s:select></s:select>包含的属性有:list="" :name="" :value="" ...
FineReport——JS二次开发（隐藏下拉框控件的倒三角）
在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...
js不是从上到下执行的吗？
如果说js是从上到下解释执行的, 那么,按道理应该会执行错误前面的代码. 如: [代码一] //输出1,2,到3报错 console.log("一") console.log(&q ...
js：jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
[Ext JS 4] 实战之多选下拉单 (带checkbox)
前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...

随机推荐

turbolink 造成 link_to异常
link_to 点击之后不刷新不加载文件 send_file 只能在浏览器中打开,而不能下载解决方法:注释gem turbolink,application.js 中移除turbolink
CodeForces - 799B T-shirt buying 【贪心】
题目链接 http://codeforces.com/problemset/problem/799/B 题意给出N件衣服 pi 表示第i件衣服的价格 ai 表示第i件衣服的前面的颜色 bi 表示 ...
BZOJ 4523 [Cqoi2016]路由表 Trie树
Trie树的应用题目. 在线建立一棵01 Trie树,然后按照要求用询问在上面跑,用单调栈维护答案即可. #include<iostream> #include<cstdio> ...
openfire插件(1)
插件核心类,这里对PacketInterceptor.Plugin进行继承.如果开发插件就一定要继承Plugin,而继承PacketInterceptor是拦截用户发送的消息包.对消息包进行过滤.拦截 ...
集训Day10
果然颓的不像话 bzoj3680 gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将n个gty吊在n根绳子上,每根绳子穿过天 ...
BZOJ_3935_Rbtree
https://lydsy.com/JudgeOnline/problem.php?id=3935 分析: 如果知道更改后的状态,那么代价和是否合法都能求出来对不合法的情况也设一个估价函数. 随机这 ...
监控mysql主从同步状态是否异常
监控mysql主从同步状态是否异常,如果异常,则发生短信或邮寄给管理员标签:监控mysql主从同步状态是否异常阶段1:开发一个守护进程脚本每30秒实现检测一次. 阶段2:如果同步出现如下错误号(1 ...
java 资料必备
学习java个人以为必备的资料很多,边上课,边总结: 1.jdk API这个是必须的,什么资料都没有这个权威 2. javaJAVA 2核心技术7th 3. BJava就业培训教程张孝祥 4. thi ...
Ajax的属性
1.属性列表 url: (默认: 当前页地址) 发送请求的地址. type: (默认: "GET") 请求方式 ("POST" 或 "GET ...
面试题: 数据库笔试 sql操作已看上课的练习题50sql
2018/5/31 oracle数据库面试笔试试题总结http://www.yjbys.com/qiuzhizhinan/show-308759.html 1/4Oracle数据库1.基础测试选择在部 ...

js实现页面的上滑下拉功能

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

随机推荐

热门专题