uniapp常用组件：页面加载，暂无数据组件

页面加载

页面效果展示 

组件代码  components/su-list-loading/su-list-loading.vue

<template>
  <view class="su-list-loading" v-if="loading">
    <template v-if="!listLength">
      <u-skeleton class="mb30" v-for="item in 5" :key="item" rows="3" :loading="true" :animate="true"></u-skeleton>
    </template>
    <u-loading-icon v-else mode="circle"></u-loading-icon>
  </view>
</template>

<script>
  export default {
    name: "su-list-loading",
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      listLength: {
        type: Number,
        default: 0
      }
    }
  }
</script>

<style lang="scss">
  .su-list-loading {
    padding: 20upx;
  }
</style>

页面引用

   <!-- loading -->
        <su-list-loading :loading="listLoading" :listLength="list.length"></su-list-loading>

暂无数据 

页面效果展示

页面代码

<template>
  <view class="su-empty">
    <view class="su-empty__image">
      <image src="../../static/images/blank-noData.png" mode="aspectFit"></image>
    </view>
    <view class="su-empty__text">
      {{text}}
    </view>
    <slot></slot>
  </view>
</template>

<script>
  export default {
    name: "su-empty",
    props: {
      mode: {
        type: String,
        default: 'noData'
      },
      text: {
        type: String,
        default: '暂无数据'
      },
    }
  }
</script>

<style lang="scss">
  .su-empty {
    padding: 60upx;

    &__image {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 520upx;
        height: 260upx;
        display: block;
      }
    }
    &__text{
      font-size: 28upx;
      color: #999;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20upx;
    }
  }
</style>

 页面引用

<su-empty v-else text="暂无数据"></su-empty>