起初我通过计算属性遍历了商品列表,在所有的商品视图中加入商品缩略图小球,然后,通过给每个商品列表里增加一个boolean属性
show ,通过点击购物车图标来控制我刚创建的小球的显示与隐藏,然后自己就进入了死胡同,饶了半天,计算属性的数据通过
set 方式改变后,Dom死活不听话就是不按套路出牌(因为计算属性存在数据缓存),于是不得已放弃此笨拙的办法。阶段一最终实现方案
上面踩坑是因为贪多,想一次性到位,提前加载所有商品的小球缩略图,然后通过点击购物车来控制当前商品缩略图的显示与隐藏.那么我们要不换一种思路,仅创建一个缩略小球怎么样,通过
boolean 来控制它的显示和隐藏,位置动态变化,点击哪个商品就让他显示到哪个商品的范围内,并且每次点击给他设置个true的属性丢到一个数组中.好,我们先在data中定义小球是否显示的属性及显示小球的数组
data () {
return {
showMoveDot: [], //控制下落的小圆点显示隐藏
}
然后我们在点击购物车的时候来给
showMoveDot 数组动态增加属性,然后在Dom中遍历这个数组,双向绑定,最后通过
v-if 来控制显示和隐藏,这样是不是非常妙~~点击购物车给
showMoveDot 增加
true 的属性
methods: {
addToCart (product, num) {
this.showMoveDot = [...this.showMoveDot, true];
}
}
Dom中遍历
showMoveDot ,并且通过
v-if 来控制商品缩略小球的显示
<div
v-for="(item,index) in showMoveDot"
:key="index">
<div class="move_dot"
ref="ball"
v-if="item">
</div>
</div>
此时点击购物车图标就会在当前商品中出现商品缩略图的小球,至此,阶段一大功告成 ✿✿ヽ(°▽°)ノ✿ ~
第二阶段代码实现
本阶段需要用到动画知识,所以首先想到的是Vue的 transition 属性,首先给缩略图的小球包一层
transition 并且增加
appear 动画并且实现
beforeEnter 、
afterEnter 事件方法,所以此时修改Dom代码
