vue功能之“loading加载优化“

一、新建组件写入

<template>
  <div class="loading">
      <img src="/imgs/loading-svg/loading-bars.svg" alt="">
  </div>
</template>

<script>
export default {
    name:'loading'
}
</script>

<style lang='scss'>
.loading{
    height: 80px;
    line-height: 80px;
    text-align: center;
    padding: 30px 0;
    img{
        height: 100%;
    }
}
</style>

二、 使用

<template>
  <div class="order-list">
    <div class="wrapper">
      <div class="container">
        <div class="order-box">
          <loading v-if="loading"></loading>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Loading from './../components/Loading'
  export default{
    name:'order-list',//orderList订单详情
    components:{
      Loading,
    },

    data(){
     return{
       list:[],//商品列表
       loading:true,//是否显示懒加载
       pageSize:10,//动态绑定的-每页显示条目个数
       total:0,//总条目数
       pageNum:1,//能够自动识别-显示几列-
       busy:false,//默认不触发滚动
       showNextPage:false,//是否显示-加载更多
     }
    },
    mounted(){
      this.getOrderList()
    },
    methods:{
     
      getOrderList(){//获取列表信息
       this.loading = true
       this.busy = true
        this.$axios.get('/orders',
        {
          params:{
            pageSize:10,
            pageNum:this.pageNum
          }
        }).then((res)=>{
          this.loading = false
          this.list = this.list.concat(res.list)//数组累加
          this.total = res.total
          this.showNextPage = res.hasNextPage
          this.busy = false
        }).catch(()=>{
          this.loading = false
          
        })
      },
    }
  }
</script>

三、效果展示