五.Header.vue

• 弹层制作

  • 使用css sticky footer技术

  • vue的v-for遍历

  • vue的v-show和事件监听

  • vue动画处理

• header和公告栏制作

  • text-overflow:ellipsis的使用

  • font-size:0和vertical-align的使用

  • mixin的运用

  • 背景图片的虚化

  • flex布局的使用

html部分

js部分

• 星星组件参看:

这里需要注意的是:

使用一个classMap的映射方法来实现数字和类型之间的转换

元数据supports是一个数组:

"supports": [      {        "type": 0,        "description": "在线支付满28减5"      },      {        "type": 1,        "description": "VC无限橙果汁全场8折"      },      {        "type": 2,        "description": "单人精彩套餐"      },      {        "type": 3,        "description": "该商家支持发票,请下单写好发票抬头"      },      {        "type": 4,        "description": "已加入“外卖保”计划,食品安全保障"      }    ],

然后页面需要根据不同的type来显示不同的description,并且还要显示不同的图片

这就需要做一个关联,将数组的值跟图片关联起来,而图片的关联是根据class来识别的,从而可以实现数组的方式来调用对应的图片.

                &.decrease              bg-image('decrease_1')            &.discount              bg-image('discount_1')            &.guarantee              bg-image('guarantee_1')            &.invoice              bg-image('invoice_1')            &.special              bg-image('special_1')

通过做一个对应关系

this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];//classMap数组的顺序就对应supports数组的顺序//例如supports数组的第一个元素就对应decrease,而decrease又对应到.decrease的classclassMap[seller.supports[0].type] //seller.supports[0].type就是0,然后classMap的第0个就是decrease,就能够指向到.decrease

这里只需要用数组第一个元素即可

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

这里是用到全部的元素

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

css部分

• 考虑到行内元素的不一致的对齐,需要大量使用line-height和vertical-align

• font-size为0,为了去掉行内元素的间隙,这个可以继承,所以需要在子孙元素里面再单独设置font-size

• 对于text-overflow:ellipsis的长度取决于块的长度

• <span class="bulletin-title"></span><span class="bulletin-text">{

  {seller.bulletin}}</span> 用合并代替换行来取消多余字符,这种情况也是可以避免设置font-size为0

• 使用vertical-align :top之后还需要margin-top :7px,在没办法完全对齐的情况下使用

• clearfix的css sticky footer部分需要参看:

备注:

1. text-overflow :ellipsis显示在底部.不是中间,是浏览器的显示处理不同