Vue.js高仿餓了么外賣App 2016最火前端框架(17h) 第六章學(xué)習(xí)總結(jié)

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組件洪碳。

組件目錄結(jié)構(gòu)如下：

Icon.vue

<template>
  <span class="icon" :class="['icon_'+kind, iconCls]"></span>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      }
    },
    props: {
      iconClsNum: {
        type: Number,
        required: true
      },
      kind: {
        type: Number,
        default: 1
      }
    }递览，
    computed: {
      iconCls() {
        return this.classMap[this.iconClsNum]
      }
    }
  }
</script>

<style lang="scss">
  @import "../../common/scss/mixin";
  .icon {
    display: inline-block;
    vertical-align: top;
    background-repeat: no-repeat;
    &.icon_1 {
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
      &.decrease {
        @include bg-image('img/decrease_1');
      }
      &.discount {
        @include bg-image('img/discount_1');
      }
      &.guarantee {
        @include bg-image('img/guarantee_1');
      }
      &.invoice {
        @include bg-image('img/invoice_1');
      }
      &.special {
        @include bg-image('img/special_1');
      }
    }
    &.icon_2 {
      width: 16px;
      height: 16px;
      background-size: 16px 16px;
      &.decrease {
        @include bg-image('img/decrease_2');
      }
      &.discount {
        @include bg-image('img/discount_2');
      }
      &.guarantee {
        @include bg-image('img/guarantee_2');
      }
      &.invoice {
        @include bg-image('img/invoice_2');
      }
      &.special {
        @include bg-image('img/special_2');
      }
    }
    &.icon_3 {
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
      &.decrease {
        @include bg-image('img/decrease_3');
      }
      &.discount {
        @include bg-image('img/discount_3');
      }
      &.guarantee {
        @include bg-image('img/guarantee_3');
      }
      &.invoice {
        @include bg-image('img/invoice_3');
      }
      &.special {
        @include bg-image('img/special_3');
      }
    }
    &.icon_4 {
      width: 16px;
      height: 16px;
      background-size: 16px 16px;
      &.decrease {
        @include bg-image('img/decrease_4');
      }
      &.discount {
        @include bg-image('img/discount_4');
      }
      &.guarantee {
        @include bg-image('img/guarantee_4');
      }
      &.invoice {
        @include bg-image('img/invoice_4');
      }
      &.special {
        @include bg-image('img/special_4');
      }
    }
  }
</style>

引用方法如下

<div v-if="seller.supports" class="support">
  <icon :kind="1" :iconClsNum="seller.supports[0].type"></icon>
   <span class="text">{{seller.supports[0].description}}</span>
</div>

3. Sticky footers布局。

Sticky footers的概括如下：如果頁面內(nèi)容不夠長的時候偶宫，頁腳塊粘貼在視窗底部非迹；如果內(nèi)容足夠長時，頁腳塊會被內(nèi)容向下推送纯趋。關(guān)注詳情憎兽，可參考 CSS秘密花園： Sticky footers冷离。
在sell app中纯命，使用的sticky footers的技術(shù)要點匯總?cè)缦隆?br> sell app 中html代碼如下

<div class="detail ">
  <div class="detail-wrapper clearfix">
    <div class="detail-main">
    </div>
  </div>
  <div class="detail-close">
    <i class="icon-close"></div>
  </div>
</div>

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的關(guān)鍵技術(shù)點是 .detail 樣式中 w100% ,h100% ,overflow: auto; 在 .detail-wrapper 加上一個清除浮動的.clearfix并且給它設(shè)置一個最小高度100%西剥。.detail-main樣式里要預(yù)留一個padding-bottom: 64px。在.detail-close樣式里通過設(shè)置position：relative;和margin-top: -64px;來實現(xiàn)亿汞。以上代碼是我理解后在簡書里一氣呵成默敲出來的瞭空。

4. 評星組件。

組件目錄結(jié)構(gòu)

Star.vue 源碼如下(以下所有代碼憑借記憶和理解后逐字敲打完成疗我，中間過程沒有看一眼源碼,敲打間幾乎沒有停頓咆畏。目錄結(jié)構(gòu)教視頻中的略有不同，樣式做了進(jìn)一步一點點的優(yōu)化)：

<template>
  <div class="star" :class="starType">
    <span class="star-item" v-for="(itemClass, index) in itemClasses" :class="itemClass" :key="index"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  const LENGTH = 5
  const CLS_ON = 'on'
  const CLS_OFF = 'off'
  const CLS_HALR = 'half'
  export default {
    props: {
      size: {
        type: Number
      },
      scores: {
        type: Number
      }
    },
    computed: {
      starType() {
        return 'star-' + this.size
      },
      itemClasses() {
        let result = []
        let score = Math.floor(this.scores * 2) / 2
        let hasDecimal = score % 1 !== 0
        let integer = Math.floor(score)
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON)
        }
        if (hasDecimal) {
          result.push(CLS_HALR)
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF)
        }
        return result
      }
    }
  }
</script>

<style lang="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');
    }
  }

  .star {
    font-size: 0;
    .star-item {
      display: inline-block;
      background-repeat: no-repeat;
      &:last-child {
        margin-right: 0;
      }
    }
    &.star-24 {
      .star-item {
        width: 10px;
        height: 10px;
        background-size: 10px 10px;
        margin-right: 3px;
        &.on {
          @include bg-image('img/star24_on')
        }
        &.off {
          @include bg-image('img/star24_off')
        }
        &.half {
          @include bg-image('img/star24_half')
        }
      }
    }
    &.star-36 {
      .star-item {
        width: 15px;
        height: 15px;
        background-size: 15px 15px;
        margin-right: 6px;
        &.on {
          @include bg-image('img/star36_on')
        }
        &.off {
          @include bg-image('img/star36_off')
        }
        &.half {
          @include bg-image('img/star36_half')
        }
      }
    }
    &.star-48 {
      .star-item {
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
        margin-right: 22px;
        &.on {
          @include bg-image('img/star48_on')
        }
        &.off {
          @include bg-image('img/star48_off')
        }
        &.half {
          @include bg-image('img/star48_half')
        }
      }
    }
  }
</style>

使用時可以通過 <div class="star-wrapper"></div> 包裹來控制外層樣式吴裤。

5. Title組件旧找。

Title.vue:

<template>
  <div>
    <div class="title">
      <div class="line"></div>
      <div class="text">{{cont}}</div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      cont: {
        type: String,
        required: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/scss/mixin';
  .title{
    display: flex;
    .line{
      flex: 1;
      position: relative;
      top: -6px;
      @include border-bottom-1px(rgba(255, 255, 255, .2));
    }
    .text{
      font-size: 14px;
      line-height: 14px;
      font-weight: 700;
      padding: 0 12px;
    }
  }
</style>

使用時，可以通過 <div class="title-wrapper"> <v-title cont="優(yōu)惠信息"></v-title> </div> 外層的.title-wrapper控制外層樣式麦牺。.title-wrapper{ margin: 28px 36px 24px; }钮蛛。因為，cont接收的type被限制成String剖膳。所以在給cont賦值時魏颓，因為給的直接是字符串，所以不可以給cont加 : 賦值吱晒。

6. WebStorm快捷鍵 `command + alt + t` 可以在外層寫包裹的代碼甸饱。

7. transition動畫÷乇簦可以參考transition詳解柜候。

7.1 使用方法： transtion包裹動畫塊區(qū)域。然后躏精，再寫 .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;
}
...