仿京东购物车底部栏制作思路

这两天做电商项目的时候，参考了很多电商网站，发现京东的购物车底部栏非常人性化，于是模仿京东做了一个。

先附上效果图

这是底部栏可视的情况，此时的底部栏是固定在商品栏底部的。

当商品数量过多底部栏不可视时，底部栏固定在页面底随滚动条移动。

实现思路

一开始的想法是在car-footer（底部栏）子组件里计算高度实时判断。

我的思路是，计算底部栏是否在页面可视范围内，如果在，则添加car-fixed类，使它固定在底部。

但是一旦计算出不在可视范围，添加上类以后，底部栏就固定到可视页面底部，此时底部栏可视，重新判断后将class隐藏了...就出现底部栏闪烁的情况。

这个思路pass。

于是我尝试了好久终于想到一种方法（感觉有点蠢的方法）

放两个底部栏，计算判断哪个隐藏哪个显示。

上面的是随页面滚动的组件，下面是固定的

在父组件里面，getBoundingClientRect拿不到子组件距离页面顶部的距离（也可能是我不会用），无奈安装了jq（感觉很蠢的做法）

由于是在父组件修改样式需加deep

注意：下面那个固定的组件不能用v-if或者v-show来判断是否显示，因为这两种方法的显示隐藏都是不占位的，要用visibility :hidden占位，才能继续计算判断

注意：内容删除和页面加载完成的时候也要重新判断

不知道为什么在其他方法里面再次调用showCarFooter方法不生效，于是我复制了三遍...

这样显得我很蠢啊~~~

有大佬能解释一下调用失败的原因吗？或者应该怎么调用。（this.$options.methods.showCarFooter也不能生效的）

好啦~大功告成！

虽然做法很笨但总算是整出来了...

有大佬有更好的方法欢迎指点啊！！！

最后附上vue-cli里面安装jq踩的坑...

翻CSDN找到的都是说要在./build/webpack.config.js里面配置jq。

但是目录结构里面没有build文件夹，更找不到webpack.config.js这个文件了。

查了查发现是vue-cli将这个文件夹隐藏了。

最后我在node_modules/@vue/cli.service里面找到了webpack.config.js

在需要用到的界面调用import $ from 'jquery'就可以了。（应该不会有人在脚手架里装jq了吧...）

最后，各位大佬有更好的解决方法或者思路欢迎一起探讨，也希望有大佬能解决我的一点小疑问。

第一版的依然存在一些小bug，现已完全解决。

上面调用函数this方法不实现的原因是我忘记加()了。

第一版的删除和选中删除后进行距离判断，但是判断操作的执行时机是在循环删除之前，目前怀疑是ES6的语法some,filter是异步调用的原因，但是用一般for循环依然存在这种问题。有知道原因的大佬欢迎评论区指点。

因为异步问题不知道怎么解决（也许是这个问题吧），所以我在updated（数据更新以后）调用判断操作。

最终的代码如下：

仿京东购物车底部栏制作思路相关推荐

京东购物车html页面,仿京东购物车页面
[实例简介] 仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面 [实例截图] [核心代码] 仿京东 └── 仿京东 ├── css │ ├── im ...
HTML+CSS+JS仿京东购物车页面动态效果
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd ...
android qq音乐布局,仿QQ音乐底部栏
最近在开发一款高仿QQ音乐播放器的Demo,遇到了一个问题,在QQ音乐主界面有一个常驻底部栏,底部栏中有一个可左右滑动切歌的组件,最后还是实现了效果,今天来回顾一下实现过程. 要实现的就是最下方的常驻 ...
Android 实现仿京东购物车动画
为了给商品加入购物车添加点酷炫动画,最近参考了京东,淘宝等常用的电商App的购物车添加动画,根据产品的业务需求,使用补间动画结合插值器实现: 效果图: 关键代码(修改控件id,可直接使用): priv ...
HTML+CSS仿京东购物车页面静态页面
目录 1 用到的知识 1.1 无序标签的使用 1.2 浮动的使用 1.3 伪类的使用 1.4 清除原有浮动所占位置 1.5 边框背景盒子布局div文字属性等等 2 HTML代码 3 CSS代码 3.1 ...
php 京东首页分类导航,仿京东导航栏
摘要: 仿京东顶部导航栏仿京东顶部导航栏 *{ margin:0px; padding:0px; } .header{ width:100%; height:35px; background-co ...
京东购物车（html+css+js）
效果图展示 html+js部分关于购物车实现的功能 1.仿京东购物车页面效果实现 2.购物车已有商品展示 3.数量增减 4.小计 5.汇总 6.全选 7.全选并汇总 8.单个商品复选 9.单个商品复 ...
android仿京东底部tab,GitHub - wenchaosong/BottomBar: 仿京东底部栏重复选择刷新动画，还有普通的样式和 MaterialDesign 样式...
轻量级的底部导航栏在原项目PagerBottomTabStrip 基础上增加了 getItem 方法,能设置对应 position 的 tab 属性实现效果图自定义扩展例子仿京东重复刷新动画 ...
HTMLCSS仿京东首页制作静态页面总结
目录一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用三.字体图标的使用四.base.css和comm ...

仿京东购物车底部栏制作思路

仿京东购物车底部栏制作思路相关推荐

最新文章

热门文章