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

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

先附上效果图

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

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

实现思路

一开始的想法是在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（数据更新以后）调用判断操作。

最终的代码如下：