在做一个商城的项目时，做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片，上拉回到商品简介的效果，并且需要用户在滑动时有一种费力的感觉。最初是通过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. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局（27分36秒）

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  2. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_09-SpringSecurityOauth2研究-Oauth2密码模式授权

    密码模式(Resource Owner Password Credentials)与授权码模式的区别是申请令牌不再使用授权码,而是直接 通过用户名和密码即可申请令牌. 测试如下: Post请求:htt ...

  3. MySQL性能优化最佳实践20条

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...

  4. djando模板----第一django模板应用

    Django模板 我们已经知道,模板函数的函数的返回值就是返回给客户端的数据,但如果返回数据很复杂,如果一个非常大的html页面,直接将页面代码固化在python脚本文件中是不合适的,当然 也可以将h ...

  5. Windows下免费的屏幕录制软件——EV录屏——推荐

    EV录屏,现在使用起来效果还不错. 软件地址:https://www.ieway.cn/evcapture.html

  6. 【Leetcode_easy】748. Shortest Completing Word

    problem 748. Shortest Completing Word 题意: solution1: class Solution { public: string shortestComplet ...

  7. Infos - 通过搜索引擎获取信息与数据

    常用搜索引擎命令 site 用来查询网站收录量. 比如site:http://www.cnblogs.com/ inurl 查URL中包含的元素,比如inurl:bbs ,搜索出URL包含bbs的页面 ...

  8. Jupter Notebook常用快捷键与常用的魔法命令

    jupter notebook快捷键整理 Part1 1.删除Cell——双击D 2.撤销删除——Z 3.新建Cell——A/B (向上/向下) 4.命令窗口——P 5.运行——Ctrl+Enter ...

  9. word模板文档填充数据

    1.切记一定要用Word 97-2003(*.doc)格式的文档另存为 *.xml格式的文件,而不能用 Word 2007(*.docx)格式的word文档转 *.xml,将转成功之后的xml文件放入 ...

  10. 在eNSP上配置VLAN的Trunk端口

    1.实验内容:在不同交换机下不同部门的员工能够互相通信,需要配置交换机之间的链路,跨交换机实现VLAN间通信 2.实验拓扑图 3.实验配置 按照实验编址表编辑配置所有PC机的IP地址 编址表如下图: ...