vue+elementUI实现分页+图片滚动加载请求数据

admin管理员组

文章数量:1596328

效果如图所示：

 如图（回到当前页）：

由于图片数量较大，一次全把数据请求出来加载很慢，所以就需要加滚动条请求数据。

v-infinite-scroll=“infiniteScroll” ：表示会触发回调函数infiniteScroll
infinite-scroll-distance=“10”：表示距离底部10px时会触发该事件
:infinite-scroll-disabled="routeLoad || noMore"：表示由变量routeLoad 决定是否执行routeLoad 等于false则执行 infiniteScroll，控制滚动禁用，true则不执行，
infinite-scroll-immediate-check： 默认值为true，该指令表示，在绑定后立即检查infiniteScroll的值和是否滚动到底。假如你的初始内容高度不够，不足以填满可滚动的容器的话，你应设为true，这样会立即执行一次routeLoad ，会帮你填充一些初始内容。
infinite-scroll-listen-for-event： 当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay： 检查routeLoad 的值的时间间隔，默认值是200，因为vue-infinite-scroll的基础原理是，vue-infinite-scroll会循环检查routeLoad 的值，以及是否滚动到底，只有当：routeLoad 为false且滚动到底，回调函数才会执

主要代码如下：

<template> 
  <div class="infinite-list-wrapper">
   <div v-if="imageData.length > 0" class="photo_box" ref="photo_box" v-loading="loading"
    v-infinite-scroll="infiniteScroll" 
    //在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时 
    //自动执行加载方法。
	:infinite-scroll-disabled="routeLoad || noMore"  // 是否禁用(数据到最后时，禁止滚动加载)
    :infinite-scroll-distance="10"  // 触发加载的距离阈值，单位为px
	 element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
     <el-card :body-style="{ border: '0px', padding: '0px' }" shadow="hover" 
        v-for="(item, index) in imageData" :key="index">
           ...
     </el-card>
    <p v-if="scrollUserLoading" style="text-align: center;font-size:14px;padding:10px 0">                        
         数据加载中...</p>
    <p v-if="noMore" style="text-align: center;font-size:14px;padding:10px 0">
        已加载全部数据
    </p>
    </div>
</div>
     <!-- 分页 -->
    <el-pagination background layout="total,prev, pager, next, jumper" :total="total" 
      :page-size="18"@current-change="handleCurrentChange" :current-page.sync="cur_page">
     </el-pagination>
</template>
<script>
export default { 
  data() {
    return {
      isloading: true,
      imageData: [],
      publicIsShow: true,
      noMore: false, // 控制"没有更多与哦 "
      routeLoad: false, //控制滚动禁用
      scrollUserNoMore: false,
      scrollUserLoading: false,// 控制"加载中"
      total: 0,
      cur_page: 0, //设置一个默认值
    };
}
  methods:{
     // 滚动加载方法
    infiniteScroll() {
      this.routeLoad = true;
      this.scrollUserLoading = true;
      if (this.publicIsShow) {
        this.publicIsShow = true;
        this.cur_page += 1; // 页码每次滚动+1
      }
      this.findImagePulic(this.cur_page, 'infiniteScroll');
    },

     // 分页功能
    handleCurrentChange(val) {
      this.publicIsShow = false;
      this.noMore = true;
      this.findImagePulic(val, 'CurrentChange')
    },

    //图片滚动条
    async findImagePulic(val, name) {
      let list
      const { data: res } = await findImage(val, 18, this.valueList, this.taskNumber)
      if (res.code == 0 && res.data.records) {
        this.total = Number(res.data.total);
        if (name == 'infiniteScroll') {
          list = res.data.records;
          this.scrollUserLoading = false;
          this.scrollUserNoMore = false;
          this.noMore = false;
          this.publicIsShow = true
          for (let i = 0; i < list.length; i++) {
            this.imageData.push(list[i]);
          }
          // 如果请求回来的数据小于pageSize，则说明数据到底了。
          if (list.length < 18) {
            this.noMore = true;
            this.scrollUserNoMore = true;
          }
          //避免数据总条数是pageSize的倍数时，数据到底还会请求一次。
          if (this.imageData.length === this.total) {
            this.noMore = true;
            this.scrollUserNoMore = true;
          }
          this.routeLoad = false;
        } else {
          this.imageData = []
          this.publicIsShow = false;
          this.noMore = false;
          this.scrollUserNoMore = false;
          this.loading = true;
          this.type = this.valueList;
          this.imageData = res.data.records;
          for (var i = 0; i < this.imageData.length; i++) {
            var id = this.imageData[i].id;
            if (this.arrCkeckAll.indexOf(id, 0) != -1) {
              this.imageData[i].checked = true;
            } else {
              this.imageData[i].checked = false;
            }
          }
          this.loading = false;
        }
      }
    },
}
}

</script>
<style lang="scss" scoped>
.infinite-list-wrapper {
  .photo_box {
    position: relative;
    overflow-y: auto;
    max-height: 700px;
    width: 100%;
    // border: 1px solid #ddd;
    // padding: 0 16px
  }
}

</style>

本文标签： 分页加载数据图片vue