vue2-elm学习记录（Day5）

知识点

(一)position&transform：translate(-50%,-50%)实现元素百分比居中

CSS3： transform: translate(-50%, -50%);

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

(二)加载动画

<transition name="loading">
    <loading v-show="showLoading"></loading>
</transition>

在initData()之前，页面尚未出现列表的时候，有两个页面显示效果：
一是：默认显示的列表图
二是：加载动画

1.列表图

...
<!--列表-->
<ul v-load-more="loaderMore" v-if="shopListArr" type=1>
    ...
</ul>
<!--默认列表图-->
<ul v-else class="animation_opacity">
    <li class="list_back_li" v-for="item in 10" :key="item">
        <img src="../../images/shopback.svg" alt class="list_back_svg" />
    </li>
</ul>

默认列表图显示如下：

2.加载动画

load图：

效果：
load设为背景图，位置固定，默认展示一个图标大小，通过定时改变图片背景的Y坐标，达到显示不同图标的效果。
loading.vue加载动画组件：

    <div class="loading_container">
          <!--共7个图标，第n个偏移量为-n*2.5-->
          <div class="load_img" :style="{backgroundPositionY:-(positionY%7)*2.5+'rem'}">
            <svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;" />
            </svg>
          </div>  
    </div>

动画：

//固定图标位置
.loading_container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @include wh(2.5rem, 2.5rem);
}
//动画图片大小、绑定动画
.load_img{
    @include wh(100%, 100%);
      background: url("../../images/icon_loading.png") no-repeat 0 0;
      background-size: 2.5rem auto;
      transform: translateY(0px);
      animation: load 0.6s infinite ease-in-out;
      position: relative;
      z-index: 11;
}
//上跳还原
@keyframes load {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
//svg绘制的图片阴影的动画
.load_ellipse {
  position: absolute;
  @include wh(2.6rem, 2rem);
  top: 2.2rem;
  left: 0.2rem;
  z-index: 10;
  animation: ellipse 0.6s infinite ease-in-out;
}
//缩小还原
@keyframes ellipse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.3);
  }
  100% {
    transform: scale(1);
  }
}

背景图标切换：

export default{
    data(){
        return{
            positionY:0,
            timer:null
        }
    },
    mounted(){
        this.timer=setInterval(()=>{
            //每0.6s改变背景图的y轴偏移量
            this.positionY++;
        },600);
    },
    // beforeDestory 组件被卸载的时候生效
    boforeDestory(){
        clearInterval(this.timer);
    }
}

在列表组件中引入loading组件，showLoading来标识是否显示loading动画,获取到数据之后showLoading的值设为false

(三)星星组件

实现效果如图：
分两层绘制：
灰色星星和橙色星星
灰色星星和成色星星在页面同一个位置
先铺灰色星星，再铺橙色星星，效果上，橙色在灰色上层
橙色星星根据评分，来控制橙色层的width，进而控制显示橙色星星的个数
余处的width即为最底层的灰色星星

<div class="rating_container">
   <section class="star_container">
    <!--灰色星星层-->
        <svg class="grey_fill" v-for="num in 5" :key="num">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star" />
        </svg>
   </section>
   <!--橙色星星层 :控制橙色星星显示区域的width-->
   <div :style="'width:'+rating*2/5+'rem'" class="star_overflow">
        <section class="star_container">
            <svg class="orange_fill" v-for="num in 5" :key="num">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star" />
            </svg>
        </section>
   </div>

</div>

//注意星星组件的满长度是2rem

宽度计算规则:

Demo学习链接: