优化滚动分页，封装组件，

licp

2024-04-24 70b128785737df0d6065b09a75cf79b49efe22fa

 src/components/view/a6-personnel-overview.vue

@@ -46,7 +46,6 @@
  }
  .card li{
    width: 320px;
    /* height: 170px; */
    border-radius: 8px 8px 8px 8px;
    box-shadow: 4px 4px 8px 0px rgba(51,51,51,0.04);
    border: 1px solid #EEEEEE;
@@ -91,8 +90,9 @@
            <el-button size="small" type="primary" @click="currentPage= 1,list=[],finishLoding = false,refreshTable()">查 询</el-button>
         </div>
      </div>
      <div class="table" @scroll="scrollFn">
      <ul v-loading="loading" class="card">
      <div class="table" v-loading="loading">
      <scroll-pagination @load="refreshTable" :finishLoding="finishLoding">
        <ul class="card" style="margin-top: 10px;">
        <li v-for="(m,i) in list" :key="i">
          <el-image style="width: 80px;
            height: 112px;" :src="javaApi+'/img/'+m.pictureUrl">
@@ -119,27 +119,18 @@
          <div class="title">{{ m.name }}</div>
        </li>
      </ul>
      <div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
      <div v-if="list.length>0">
        <el-button
          v-if="isLoding"
          type="text"
          style="display: flex; margin: 0 auto; color: #909399"
          ><i class="el-icon-loading" style="font-size:20px"></i
        ></el-button>
         <el-button
          type="text"
          v-if="finishLoding"
          style="display: flex; margin: 0 auto; color: #909399"
          >已经没有更多啦~</el-button
        >
      </div>
      </scroll-pagination>
      <div v-if="list.length<1&&!loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
      </div>
   </div>
</template>

<script>
import ScrollPagination from '../tool/scroll-paging.vue'
   export default {
    components: {
      ScrollPagination
    },
      data() {
         return {
        entity:{
@@ -152,7 +143,6 @@
        pageSize: 16, // 一页16条
        total: '',
        loading: true, // 组件loading的展示,默认为true
        isLoding: false, // 加载中，loading图标,默认为true
        finishLoding: false // 加载完成，显示已经没有更多了
         }
      },
@@ -163,13 +153,8 @@
    },
      methods: {
         refreshTable() {
        if(this.currentPage>1){
          this.isLoding = true
        }else{
        if(this.currentPage==1){
          this.loading = true
        }
        if(this.list.length==0){
          window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
        }
        this.$axios.post(this.$api.user.selectUserList,{
               page: {
@@ -195,10 +180,10 @@
              if(this.total==this.list.length){
                this.finishLoding = true;
              }
              this.currentPage++;
            }
          }
          this.loading = false
          this.isLoding = false;
            })
         },
         refresh() {