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
width: 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
width: 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组件中了
7.
修身养性