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

licp

2024-04-24 70b128785737df0d6065b09a75cf79b49efe22fa

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

@@ -151,8 +151,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">
        <li v-for="(m,i) in list" :key="i">
          <el-image class="img" :src="javaApi+'/img/'+m.imageUpload">
            <div slot="error" class="image-error" style="width: 112px;
@@ -192,27 +193,18 @@
          </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:{
@@ -226,7 +218,6 @@
        pageSize: 16, // 一页16条
        total: '',
        loading: true, // 组件loading的展示,默认为true
        isLoding: false, // 加载中，loading图标,默认为true
        finishLoding: false // 加载完成，显示已经没有更多了
         }
      },
@@ -238,13 +229,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.deviceScope.selectDeviceParameter,{
               page: {
@@ -291,10 +277,10 @@
              if(this.total==this.list.length){
                this.finishLoding = true;
              }
              this.currentPage++;
            }
          }
          this.loading = false
          this.isLoding = false;
            })
         },
         refresh() {