这两天做电商项目的时候,参考了很多电商网站,发现京东的购物车底部栏非常人性化,于是模仿京东做了一个。
先附上效果图
这是底部栏可视的情况,此时的底部栏是固定在商品栏底部的。
当商品数量过多底部栏不可视时,底部栏固定在页面底随滚动条移动。
实现思路
一开始的想法是在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(数据更新以后)调用判断操作。
最终的代码如下: