仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享

项目开发实录将其简化为一个demo方便后续使用
简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换，毕竟实际项目实际操作嘛。
下面的代码块为简略版的demo，直接复制粘贴即可实现效果（移动端喔）
后续会有另外一种解决办法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>滚动展示</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}header {width: 100%;height: 50px;display: flex;background-color: skyblue;position: fixed;top: 0;z-index: 2;}header li {flex: 1;line-height: 50px;text-align: center;}section {width: 100%;height: 100%;}.one {width: 100%;background-color: #90EE90;overflow-y: hidden;position: relative;}.one ul li {height: 50px;}.one button {position: absolute;bottom: 0;}.two {width: 100%;height: 750px;background-color: #F08080;}.goods-active{color: red;}.message-active{color: red;}.header-active{display: none;}.content-one{width: 100%;height: 50px;display: flex;background-color: skyblue;position: fixed;top: 0;z-index: 2;}.content-one li{flex: 1;text-align: center;line-height: 50px;}.content-one-active{display: none;}</style></head><body><header><li>返回</li><li class="goods">商品</li><li class="message">详情</li><li>评价</li><li>分享</li></header><div class="content-one"><li>返回</li><li>我要分享</li></div><section><div class="one"><div style="height: 50px;background-color: #999999;"></div><ul><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li><li>10</li></ul></div><div class="two"><div style="height: 50px;background-color: #999999;"></div></div></section></body>
</html>
<script type="text/javascript">var goods = document.getElementsByClassName("goods")[0]var message = document.getElementsByClassName("message")[0]var one = document.getElementsByClassName("one")[0]var header = document.getElementsByTagName("header")[0]var contentone = document.getElementsByClassName("content-one")[0]window.onload = function () {goods.classList.add('goods-active')header.classList.add('header-active')}window.onscroll = function() {//变量scrollTop是滚动条滚动时，距离顶部的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//判断当滚动条距离顶部的距离大于顶部fixed固定的header之后，样式改变if(scrollTop > header.offsetHeight){// header.style.show = trueheader.classList.remove('header-active')}else {contentone.classList.remove('content-one-active')}//具体商品和详情的切换实现如下if (scrollTop > one.offsetHeight) {message.classList.add('message-active')goods.classList.remove('goods-active')} else {goods.classList.add('goods-active')message.classList.remove('message-active')}}</script>

个人在项目实现过程中发现onscroll事件在移动端无法触发，又急着解决当前的问题，保留了onscroll的操作并查找新方法的途中，了解到了touch事件。touch方法详解如下：

touchstart：触摸开始，多点触控，也就意味着当手指放在屏幕上的时候，就已经触发了这个事件
touchmove：接触点改变，滑动时，直白讲就是手指动的过程，并未松开手指
touchend：触摸结束，手指离开屏幕时，想必这个就不用赘述了叭

以下方案仅供参考，根据个人的实际情况来进行操作，我这里的情况是在三个touch事件下判断滚动条距离顶部的距离都为0的时候，选择了判断顶部fixed固定好的header下的第一个盒子（个人命名为saveScroll）到顶部的距离，原理十分简单，当手指滑动屏幕时必然触发touchstart事件，从而会改变saveScroll盒子到顶部的距离，判断该距离小于顶部fixed的header的时候，将本来隐藏的盒子展示出来，等于或者大于该距离的时候，隐藏掉即可（手指划手机必然会涉及到一直下拉，也就是为什么会大于该距离的原因），以下是实际操作时的代码

//移动端上下划动屏幕改变顶部nav展示状态$(".saveScroll")[0].addEventListener('touchmove',function(e){//emmm，仍在研究这个preventDefault的作用e.preventDefault()//赋值确定原先距离顶部的高度var scrollTop = $(".saveScroll").offset().top//根据不同的rem比例确定顶部固定的header的高度var header_height = $(".header_height").height()//进行判断并改变显示隐藏状态if(scrollTop < header_height){$(".hide_container").hide()$(".show_container").show()}else{$(".hide_container").show()$(".show_container").hide()}})

欢迎指导~
一起学习进步呀~

仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享相关推荐

Android 仿淘宝属性标签页
直接看效果图相信这样的效果很多,我之前在网上找了很久没找到自己想要的! <?xml version="1.0" encoding="utf-8"?> ...
Android 仿淘宝商品详情页下拉足迹Demo
DropDownMultiPager 仿淘宝等商品详情页下拉足迹效果SimpleDemo 可colne之后看MainActivity的调用,方便二次开发依赖 compile 'com.nineold ...
uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
Ecshop 商品页配送方式添加实现仿淘宝按地区显示运费
Ecshop实现仿淘宝按地区显示运费淘宝网(Taobao)购物的宝贝详情页面,可以针对不同地区显示不同运费,运费由后台设定:结算时间,按重量.件数计算运费.Ecshop本身有配送方式插件,已有多家物 ...
自定义View之仿淘宝详情页
自定义View之仿淘宝详情页转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...
高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
仿淘宝详情页直接上代码
仿淘宝详情页直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...
Java爬虫爬取天猫淘宝京东搜索页和商品详情
Java爬虫爬取天猫淘宝京东搜索页和商品详情先识别商品url,区分平台提取商品编号,再根据平台带着商品编号爬取数据. 1.导包 <d ...
仿淘宝商品详情-点击显示大图,可滑动
现在在做一个商城类的项目: 大家都用过淘宝,需求就是要求仿淘宝的效果做一个, 直接上图用到了一个项目PhotoView 大家运行一下看最后一个项目,把单一的图片显示改成VIewpager就好.

仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享

仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享相关推荐

最新文章

热门文章