• 学习笔记2


    购物车里面:

    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

  • 相关阅读:
    2019-2020-1 20199314 《Linux内核原理与分析》 第六周作业
    编译内核及系统调用的坑之make menuconfig
    20199314 Linux内核原理与分析 第五周作业
    20199314 Linux内核原理与分析 第四周作业
    2019-2020-1 20199314 <Linux内核原理与分析>第三周作业
    2019-2020-1 20199314 <Linux内核原理与分析>第二周作业
    2019-2020-1 20199314 <Linux内核原理与分析>第一周作业
    简单单层前馈神经网络
    wait,waitpid学习测试
    2019-2020-1 20199307《Linux内核原理与分析》第八周作业
  • 原文地址:https://www.cnblogs.com/hustxychen/p/11083489.html
Copyright © 2020-2023  润新知