学习笔记4

1.Property or method "listShow" is not defined

解决方案：在computed计算属性里面定义listShow()

listShow(){
  if(!this.totalCount ){
    this.fold = true;
    return false;
  }
  let show = !this.fold;
  return show;
}

2.购物车详情页面缓动效果没有出来

在class为shopcart-list的div元素上添加transition="fold"

然后在stylus里面写缓动动画

.shopcart-list
  position: absolute
  left: 0
  top: 0
  z-index: -1
   100%
  transform: translate3d(0,-100%,0)
  &.fade-enter-active, &.fade-leave-active
    transition: all 0.5s
  &.fade-enter, &.fade-leave-active
    transform : translate3d(0,0,0)



...
遮罩层实现点击遮罩层，列表折叠动画

.list-mask
  position: fixed
  top: 0
  left: 0
   100%
  height: 100%
  z-index: 40
  backdrop-filter: blur(10px)
  opacity: 1
  background: rgba(7, 17, 27, 0.6)
  &.fade-enter-active, &.fade-leave-active
    transition: all 0.5s
  &.fade-enter, &.fade-leave-active
    opacity: 0
    background: rgba(7, 17, 27, 0)

3.购物车详情页面出来不了

shopcart.vue文件里面

解决办法

fold:

4.购物车详情页面无法折叠

5.商品详情页food.vue中，加入购物车效果出错，小球的位置有问题

addFirst()方法中console.log(event.target)输出当前点击对象，找到问题原因：

点击加入购物车按钮后，buy元素dispaly为none,所以无法获取当前元素位置，导致出错

进一步分析：shopcart.vue中p189行，ball.el.getBoundingClientRect()计算当前元素相对屏幕的位置，由于element被隐藏了，计算就会有问题。

巧妙的解决办法：购物车的消失也做成动画，就不会立马display设为none，这样它的位置就能正确计算

给food.vue的加入购物车的div元素加上一个transition="fold"

6. ratingselect.vue页面中，food.vue文件中添加ratingselect组件，报错，desc.positive, cannot read property 'positive' of undefined

解决办法：desc前面要加冒号，改为，:desc="desc"

就把属性从props传入了ratingselect组件中了