在做一个商城的项目时，做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片，上拉回到商品简介的效果，并且需要用户在滑动时有一种费力的感觉。最初是通过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. ubuntu 16.04 修改网卡显示名称

    ~# sudo nano /etc/default/grub找到:GRUB_CMDLINE_LINUX=""改为:GRUB_CMDLINE_LINUX="net.ifna ...

  2. HmacSHA256算法(C# 和 Java)

    Java代码: /** * HmacSHA256算法,返回的结果始终是32位 * @param key 加密的键,可以是任何数据 * @param content 待加密的内容 * @return 加 ...

  3. Xena L23网络测试仪Valkyrie使用技巧100例：修改设备管理IP，设备关机 (编号01)

    Xena Valkyrie产品提供100M~400Gbps全速率接口速率支持 产品链接 https://xenanetworks.com/valkyrie/ 需求# 1.多个用户如何共享使用一个机箱? ...

  4. 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图

    利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import  pandas  as pdimport  matplotlib. ...

  5. 前端添加视频流rtmp格式

    要求:rtmp格式, 在线直播 url地址 效果: 代码:初次打开时间较长, <!DOCTYPE html> <html> <head> <script ty ...

  6. 【miscellaneous】 GStreamer应用开发手册学习笔记之基础概念介绍

    第3章. 基础概念介绍 本章将介绍GStreamer的基本概念. 理解这些概念对于你后续的学习非常重要,因为后续深入的讲解我们都假定你已经完全理解了这些概念. 3.1. 元件(Elements) 元件 ...

  7. Redis ZSet 有序集合

    有序集合类型与集合类型的区别就是他是有序的.有序集合是在集合的基础上为每一个元素关联一个分数,这就让有序集合不仅支持插入,删除,判断元素是否存在等操作外,还支持获取分数最高/最低的前N个元素.有序集合 ...

  8. Mybatis表关联一对多、多对一、多对多

    项目工程结构如下: 1. 搭建MyBatis框架环境 首先需要引入两个包:mybatis.jar 和 sqljdbc42.jar包 若分页需要导入两个包:pagehelper-5.1.0.jar 和 ...

  9. nginx目录学习

    目录 一. Nginx 基础知识 二. Nginx 安装及调试 三. Nginx Rewrite 四. Nginx Redirect 五. Nginx 目录自动加斜线: 六. Nginx Locati ...

  10. Node中导入模块require和import??

    转自:https://blog.csdn.net/wxl1555/article/details/80852326 S6标准发布后,module成为标准,标准的使用是以export指令导出接口,以im ...