VUE首屏做一个加载中的lodaing动画_uview 设置加载动画在页面中间

作者：花生_TL007 | 2024-05-06 07:00:06

踩

uview 设置加载动画在页面中间

大家都知道vue是一个单页面（spa）应用，所以他的首屏加载时间是比较长，尤其是用在移动端的时候，从点击链接到加载出页面是一个漫长的过程，在这做首屏加载优化的方法我就不多说了，网上一搜一大把，像资源用cdn加载、路由懒加载、gzip压缩代码等等很多。

今天我们要讲的就是在你做完所有的优化之后，加载还是比较慢的情况下，这个时候我们在首屏加载出来之前给用户一个加载中的动画，不要让用户一直看到空白，这对用户来说还是比较友好的。那话不多说，这个加载中怎么写呢？马上上代码。

首先我们在index.html这个页面加上样式和元素

<style type="text/css">
      #Loading {
      top:50% ;
      left:50%;
      position: absolute;
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      z-index:100;
      }
      @-webkit-keyframes ball-beat {
      50% {
      opacity: 0.2;
      -webkit-transform: scale(0.75);
      transform: scale(0.75); }

      100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

      @keyframes ball-beat {
      50% {
      opacity: 0.2;
      -webkit-transform: scale(0.75);
      transform: scale(0.75); }

      100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

      .ball-beat > div {
      background-color: #4999ff;
      width: 10px;
      height: 10px;
      border-radius: 100% !important;
      margin: 2px;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      display: inline-block;
      -webkit-animation: ball-beat 0.7s 0s infinite linear;
      animation: ball-beat 0.7s 0s infinite linear; }
      .ball-beat > div:nth-child(2n-1) {
      -webkit-animation-delay: 0.35s !important;
      animation-delay: 0.35s !important; }
      </style>
  </head>
  <body >
    <div id="Loading">
      <div class="loader-inner ball-beat">
         <div></div>
         <div></div>
         <div></div>
      </div>
    </div>

    <div id="app"></div>
  </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

然后在App.vue 中添加一个钩子把动画删除

created() {
    if( document.getElementById('Loading'))document.getElementById('Loading').remove();
  }
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/543011