uni-im-load-state.vue

<template>
  <view class="refresh-box">
    <uni-icons v-if="status == 'loading'" color="#bbb" :size="24" class="refresh-icon" type="spinner-cycle"></uni-icons>
    <text class="refresh-text">{{status == 'loading'?contentText.contentrefresh:contentText.contentnomore}}</text>
  </view>
</template>

<script>
  export default {
    props: {
      status: {
        type: String,
        default: "loading"
      },
      contentText: {
        type: Object,
        default () {
          return {
            "contentrefresh": "加载中...",
            "contentnomore": "- 没有相关数据 -"
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .refresh-box {
    height: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 750rpx;
  }
  /* #ifdef H5 */
  @media screen and (min-device-width:960px){
    .refresh-box {
      width: 100%;
    }
  }
  /* #endif */
  
  // 给refresh-icon增加旋转的动画
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .refresh-icon {
    animation: rotate 1.3s linear infinite;
    margin: 5px;
  }

  .refresh-text {
    color: #bbb;
    font-size: 14px;
  }
</style>