购物车里面:
1.当数量为0时候,购物车上不用显示数字0,需要添加v-show:totalCount>0
2.购物车shopcart用fixed布局,购车车右边固定,左边自适应布局,可以用flex布局
3.保证cartcontrol只点击一次的方法,不冒泡:
addCart()方法里面添加
if(!event._constructor){
return;
}
4.cartcontrol动画
外层组件负责平移,内层组件负责滚动,然后0到1的渐变
.cart-decrease
display:inline-block
padding:6px
transition: all 0.4s linear
&.move-transition
opacity:1
transform: translate3D(0,0,0)
.inner
display: inline-block
line-height: 24px
font-size:24px
color: rgb(0,160,220)
transition: all 0.4s linear
transform: rotate(0)
&.move-enter,&move-leave
opacity:0
transform:translate3D(24px,0,0)
5.购物车小球贝叶斯曲线,购物车小球动画出现异常
enter里面需要设置重绘,重绘之后transform里面的translate3d才起作用
6.购物车列表折叠缓动
7.goods.vue组件的_drop方法里面添加this.$nexTick,异步实现动画,iphone上也不会卡
体验优化,异步执行下落动画
8. 购物车详情页面cannot read property 'children' of undefined
shopcart.vue页面中137行 this.$els.listContent写错了
9.商品详情页中,当点击购买按钮,该元素会消失,会影响购物车小球动画
10.商品详情页图片加载不出来
11.商品详情页addFirst函数,执行时,会进行两个点击
12.list-mask中,position为fixed定位, width设为100%,height设为100%,backdrop-filter设为blur(10px),设置模糊效果
并设置淡入淡出动画,&.fade-transition &.fade-enter , &.fade-leave, 并使用transition设置缓动
13.商品详情页,.food布局positive设为fixed,因为它是全屏的,因为它是覆盖整个屏幕。而且需要设置left,top均为0,width为100%
14.商品详情页报错,selectFood is not a function
p66行中,data里面的selectFood:{}改为selectedFood:{}
(注意,vue中私有的方法会加下划线)
15.在goods.vue中,调用子组件的方法:
在<food :food="selectedFood" v-ref:food ></food>添加v-ref:food,变身food :food="selectedFood"></food>
16.在商品详情页的food.vue文件中,image-header的positive设为relative,width为100%,height为0,但是要将padding-top设为100%,这个很重要,使得它是一个宽高相等的容器
之后设置img为absolute绝对定位,width,height均为100%,top,left均为0