Vue.js高仿饿了么外卖App 2016最火前端框架(17h) 第六章学习总结

1. @2x.png和@3x.png图片的scss样式写法。

@mixin bg-image($url){
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png")
  }
}

2. 自己亲自动手写的Icon组件。

组件目录结构如下：

Icon.vue

引用方法如下

  
   {{seller.supports[0].description}}

3. Sticky footers布局。

Sticky footers的概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。关注详情，可参考 CSS秘密花园： Sticky footers。
在sell app中，使用的sticky footers的技术要点汇总如下。
sell app 中html代码如下

sell app中scss代码如下

.detail{
  position: fixed;
  z-index: 100;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 17, 27, .8);
  overflow: auto;
  .detail-wrapper{
    min-height: 100%;
    .detail-main{
      margin-top: 64px;
      padding-bottom: 64px;
    }
  }
  .detail-close{
    position: relative;
    margin-top: -64px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    clear: both;
  }
}

在 sell app 中使用的sticky footer的关键技术点是 .detail 样式中 w100% ,h100% ,overflow: auto; 在 .detail-wrapper 加上一个清除浮动的.clearfix并且给它设置一个最小高度100%。.detail-main样式里要预留一个padding-bottom: 64px。在.detail-close样式里通过设置position：relative;和margin-top: -64px;来实现。以上代码是我理解后在里一气呵成默敲出来的。

4. 评星组件。

组件目录结构

Star.vue 源码如下(以下所有代码凭借记忆和理解后逐字敲打完成，中间过程没有看一眼源码,敲打间几乎没有停顿。目录结构教视频中的略有不同，样式做了进一步一点点的优化)：

使用时可以通过

包裹来控制外层样式。

5. Title组件。

Title.vue:

使用时，可以通过

外层的.title-wrapper控制外层样式。.title-wrapper{ margin: 28px 36px 24px; }。因为，cont接收的type被限制成String。所以在给cont赋值时，因为给的直接是字符串，所以不可以给cont加 : 赋值。

6. WebStorm快捷键 command + alt + t 可以在外层写包裹的代码。

7. transition动画。可以参考transition详解。

7.1 使用方法： transtion包裹动画块区域。然后，再写 .fade-enter . fade-enter-active .fade-leave-active .fade-leave-to的样式。
scss代码块如下：

...
opacity: 1;
background-color: rgba(7, 17, 27, .8);
&.fade-enter,
&.fade-leave-to{
        opacity: 0;
        background-color: rgba(7, 17, 27, 0);
}
&.fade-enter-active,
&.fade-leave-active{
   transition: all .5s;
}
...