zoukankan      html  css  js  c++  java
  • 在vue中手动实现简易的“正在加载”动画

    一、背景需求

    当页面有大量数据需要渲染时,我们希望给用户提供一个等待的预期
    也就是说,在数据渲染之前,在页面上显示“正在加载”的简易动画

    二、实现过程

    我们可以把这一部分的代码抽离出来,作为基础/公用组件

    // loading.vue
    <template>
      <div class="loading">
        <img width="24" height="24" src="./loading.gif">
        <p class="desc">{{this.title}}</p>
      </div>
    </template>
    <script type="text/ecmascript-6">
    export default {
      name: 'Loading',
      props: {
        title: {
          type: String,
          default: '正在载入...'
        }
      }
    }
    </script>
    
    <style scoped lang="stylus" rel="stylesheet/stylus">
      @import "~common/stylus/variable"
      .loading
         100%
        text-align: center
        .desc
          line-height: 20px
          font-size: $font-size-small
          color: $color-text-l
    </style>
    

    然后在具体的页面组件中,引入并注册 Loading
    用一个Div去包裹 Loading 标签
    并使用v-show来对这个Div的显示和消失作切换

    <div class="loading-container" v-show="!discList.length">
        <Loading></Loading>
     </div>
    

    数组 discList 就是将要渲染的数据

  • 相关阅读:
    在springmvc中,什么是逻辑视图?什么是物理视图?
    docker2
    docker1
    HTTP Service 中篇
    HTTP Service 上篇
    Centos7 fstab盘符挂载硬盘导致重启系统失败解决办法
    vsphere网络
    LVS的工作原理认识
    数字转换
    对def函数的参数认识
  • 原文地址:https://www.cnblogs.com/baebae996/p/13751858.html
Copyright © 2011-2022 走看看