在做一个商城的项目时，做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片，上拉回到商品简介的效果，并且需要用户在滑动时有一种费力的感觉。最初是通过iscroll插件实现的，但这个插件在使用时有太多坑儿，总是下面会出现大片空白，还找不到是哪里的问题。

这里用了js原生事件，核心是移动端的touchstart,touchmove,touchend三个事件，判断相对位移来绑定相应的事件。下面是相应的代码，效果还不是很完善。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height: 100%;
background: pink;
font-size: 
overflow-y:scroll;
-webkit-overflow-scroll:touch;
overflow-scroll:touch;
}
header{
width:100%;
height: 100%;
background: yellow;
position: relative;
}
section{
width:100%;
height: 200%;
background: green;
display: none;
position: relative;
}
div{
background: #fff;
height: 50px;
text-align: center;
line-height: 50px;
width:100%;
}
div.header{
position: absolute;
bottom: -50px;
left: 0;
}
div.section{
top: -50px;
left: 0;
}
</style>
</head>
<body>
<header class="top">
<div class="header">向下拖动查看详情</div>
<ul>
<li>商品简介</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
</ul>
</header>
<section class="down">
<div class="section">向上拖动查看简介</div>
<ul>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
<li>圣诞节圣诞节</li>
</ul>
</section>
<script src="jQuery-1.11.3.js"></script>
<script>

var oBody = document.getElementsByTagName("body")[0];
var oHeader = document.getElementsByTagName("header")[0];
var oSection = document.getElementsByTagName("section")[0];
var oDiv1 = document.getElementsByTagName("div")[0];
var oDiv2 = document.getElementsByTagName("div")[1];
var startX = 0;
var startY = 0;
var diffX = 0;
var diffY = 0;
var flag = true;
oBody.addEventListener("touchstart",function(e){
/*console.log(e);
var touches = e.touches;
console.log("按下的时候");
console.log("按下时的坐标 X:"+touches[0].pageX + "Y:" + touches[0].pageY)*/
var touches = e.touches;
startX = touches[0].pageX;
startY = touches[0].pageY;
},false);
oBody.addEventListener("touchmove",function(e){
/*var touches = e.touches;
console.log("移动的时候");
console.log("移动时的坐标 X:"+touches[0].pageX + "Y:" + touches[0].pageY)*/
var touches = e.touches;
diffY = startY - touches[0].pageY;
diffX = startX - touches[0].pageX;
/*if(flag && document.body.scrollHeight - document.body.clientHeight <= document.body.scrollTop + 14 && diffY > 200){
oDiv1.style.display = "block";
}else if(!flag && document.body.scrollTop < 10 && diffY < -200){
oDiv2.style.display = "block";
}*/
},false);
oBody.addEventListener("touchend",function(e){/*
var touches = e.touches;
console.log("离开的时候");
console.log("离开时的坐标 X:"+touches[0].pageX + "Y:" + touches[0].pageY)*/
/*console.log("Y:"+diffY + ";X:" + diffX);
console.log(document.body.scrollHeight - document.body.clientHeight);
console.log("离开时的坐标 X:"+document.body.scrollTop)*/
if(flag && document.body.scrollHeight - document.body.clientHeight <= document.body.scrollTop + 14 && diffY > 100){
//oHeader.style.display = "none";
$(".top").slideUp(200);
oSection.style.display = "block";
document.body.scrollTop = 50;
flag = false;
}else if(!flag && document.body.scrollTop < 10 && diffY < -100){
$(".top").slideDown(200,function(){
oSection.style.display = "none";
});

flag = true;
}
},false);
</script>
</body>
</html>

用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介的更多相关文章

  1. 仿淘宝商品详情页上拉弹出新ViewController

    新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...

  2. js原生实现三级联动下拉菜单

    js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  3. android仿京东、淘宝商品详情页上拉查看详情

    话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...

  4. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  5. Jquery手机下拉刷新，下拉加载数据

    一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...

  6. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  7. vue.js移动端app实战4：上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  8. mescroll.js简单的上拉加载、下拉刷新插件，带完整注释

    声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...

  9. mui的上拉加载更多 下拉刷新 自己封装的demo

    ----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...

随机推荐

  1. Python3 中codecs进行文件的读取

    简单的概念与说明 编码(动词):按照某种规则(这个规则称为:编码(名词))将"文本"转换为"字节流".而在python 3中则表示:unicode变成str 解 ...

  2. AES加密(java和C#)

    需求:Java和C#进行数据交互,互相采用AES/CBC/PKCS5Padding进行加解密 Java加密和解密的代码如下: /** * 加密 1.构造密钥生成器 2.根据 ecnodeRules 规 ...

  3. react Link标签 火狐失效怎么解决

    这个问题其实找了好多资料都没有具体的解决方法: 今天突然想到可能是层级嵌套出问题了,刚好有个bug也是关于这个的,已经亲测解决了 代码如下:火狐和谷歌都能正常的跳转 <Link to=" ...

  4. 好工具必须SHOW出来！ NGFW下一代防火墙性能评估利器：Safire ！

    2019-09-26 00:05:54 今天先起个头,后面陆续完善 NGFW下一代防火墙是什么? 我们要关注NGFW下一代防火墙的哪些指标? 为什么说NGFW的性能不好评估?现有的评估手段工具介绍? ...

  5. 人工神经网络反向传播算法（BP算法）证明推导

    为了搞明白这个没少在网上搜,但是结果不尽人意,最后找到了一篇很好很详细的证明过程,摘抄整理为 latex 如下. (原文:https://blog.csdn.net/weixin_41718085/a ...

  6. matlab截取图像

    声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 对于Matlab的使用情况常常是这样子的,很多零碎的函数名字很难记忆,经常用过后过一段时间就又忘记了,又得去网 ...

  7. mysql学习之join从句

    一.join从句共有5种类型 内连接(inner join) 全外连接(full outer join) 左外连接(left outer join) 右外连接(right outer join) 交叉 ...

  8. css实现可伸缩的搜索框

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  9. UiPath工具当中写入代码

    在UIPath的工具中选择下面的控件 点击[Edit Code]之后出现写代码的地方,入力VB.net代码 点击[Edit Arguments]之后是这个方法的传入和传出的值. 下面自己做的一个小例子 ...

  10. Spring IoC 和 DI 简介（二）

    Spring IoC 和 DI 简介 IoC:Inverse of Control(控制反转) 读作“反转控制”,更好理解,不是什么技术,而是一种设计思想,就是将原本在程序中手动创建对象的控制权,交由 ...