vue2elm学习记录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 学习链接: