在做一个商城的项目时，做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片，上拉回到商品简介的效果，并且需要用户在滑动时有一种费力的感觉。最初是通过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. MySQL数据库之主从复制

    一)MySQL主从复制的原理 MySQL主从复制是一个异步的复制过程,数据从一个MySQL数据库(master)复制到另一个MySQL数据库(slave),master和slave之间实现主从复制,主 ...

  2. toast提示信息获取和Monkey笔记

    获取toast toast提示信息出现场景:用户输入用户名和密码后,提示的'登录成功', 用之前的定位方法获取不了,需要Uiautomator2来获取 安装node.js (使用 npm 或 node ...

  3. JsonSchema用法

    JsonSchema用法 简介 JSON Schema是基于JSON格式,用于定义JSON数据结构以及校验JSON数据内容.JSON Schema官网地址:http://json-schema.org ...

  4. 已经安装了VRay但3dmax的材质编辑器里没有VRay材质的解决过程

    已经安装了VRay但3dmax的材质编辑器里没有VRay材质怎么办? 众所周知,vray是一款很好用的渲染器,但是安装过程和使用当中总会出现各种问题.昨天我就遇到了,捣鼓半天终于解决,分享给大家自己的 ...

  5. Node express post 大小设置

    body-parser 默认限制了body长度 var bodyParser = require('body-parser'); app.use(bodyParser.json({"limi ...

  6. 关于iframe的一些使用

    在iframe页面,获取当前iframe的id var iframeId = window.frameElement.id.toString(); 获取父窗口中另一个iframe的iframe,注意返 ...

  7. python,pycharm,anaconda之间的区别与联系 - python基础入门(2)

    Python环境配置-Pycharm下载/Anaconda安装 中我们已经完成了 Pycharm 和Anaconda 的安装.可能对于刚接触的小伙伴还是比较懵逼的,一会python一会Anaconda ...

  8. Lamda

  9. sql复合索引使用和注意事项

    1.定义: 单一索引: 单一索引是指索引列为一列的情况,即新建索引的语句只实施在一列上; 复合索引: 复合索引也叫组合索引: 用户可以在多个列上建立索引,这种索引叫做复合索引(组合索引). 复合索引在 ...

  10. Dining(POJ-3281)【最大流】

    题目链接:https://vjudge.net/problem/POJ-3281 题意:厨师做了F种菜各一份,D种饮料各一份,另有N头奶牛,每只奶牛只吃特定的菜和饮料,问该厨师最多能满足多少头奶牛? ...