前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求， 请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13219

效果图如下：

实现代码如下：

cc-paging

使用方法

 <!-- 加载中用法 isLoading：是否加载 isEnd:是否结束加载 -->  <cc-paging :isLoading="true" :isEnd="false"></cc-paging>  <!-- 加载完成 isLoading：是否加载 isEnd:是否结束加载-->  <cc-paging :isEnd="true" :isLoading="false"></cc-paging>  

HTML代码实现部分

 <template>  <view class="content">  <view style="margin-left: 20px;"> 基本用法 </view>  <!-- 加载中用法 isLoading：是否加载 isEnd:是否结束加载 -->  <cc-paging :isLoading="true" :isEnd="false"></cc-paging>  <!-- 加载完成 isLoading：是否加载 isEnd:是否结束加载-->  <cc-paging :isEnd="true" :isLoading="false"></cc-paging>  <view style="margin-left: 20px;"> 动态使用用法 </view>  <!-- 加载中用法 -->  <cc-paging :isEnd="!isLoad" :isLoading="isLoad"></cc-paging>  <button @click="changeStatusClick">切换状态</button>  </view>  </template>  <script>  export default {  data() {  return {  isLoad: true  }  },  methods: {  changeStatusClick() {  this.isLoad = !this.isLoad;  }  }  }  </script>  <style>  page {  background: white;  }  .content {  display: flex;  padding-top: 29px;  flex-direction: column;  }  </style>  

组件实现代码

 <template>      <view class="paging">          <slot></slot>          <view class="loading" v-if="isLoading">              <view class="flexcenter">                  <image lazyLoad src="https://qiniu-image.qtshe.com/qtsloading.gif" alt="前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求"></image>                  <view class="loadtips">加载中</view>              </view>          </view>          <view class="is-end" v-if="isEnd">我是有底线的哦～</view>      </view>  </template>  <script>  export default {      data() {          return {};      },      props: {          isEnd: {              type: Boolean,              default: false          },          isLoading: {              type: Boolean,              default: false          }      }  };  </script>  <style>  @import './index.css';  </style>