his_user_miniapp/components/Loading.vue

<template>
  <view class="Loads acea-row row-center-wrapper" v-if="loading || !loaded" style="margin-top: 20rpx;">
    <template v-if="loading">
      <view class="iconfont icon-jiazai loading acea-row row-center-wrapper"></view>
      正在加载中
    </template>
    <template v-if="!loading">
      上拉加载更多
    </template>
  </view>
</template>

<script>
  export default {
    name: "Loading",
    props: {
      loaded: Boolean,
      loading: Boolean
    }
  };
</script>
<style lang="less">
	.Loads {
	  height: 0.8*100rpx;
	  font-size: 0.25*100rpx;
	  color: #000;
	}
	.Loads .iconfont {
	  font-size: 0.3*100rpx;
	  margin-right: 0.1*100rpx;
	  height: 0.32*100rpx;
	  line-height: 0.32*100rpx;
	}
	/*加载动画*/
	@keyframes load {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	.loadingpic {
	  animation: load 3s linear 1s infinite;
	}
	.loading {
	  animation: load linear 1s infinite;
	}
	
</style>