Vue Element UI v-infinite-scroll无限触发问题解决+样例代码

最新推荐文章于 2025-03-17 10:31:41 发布

JIZQAQ

最新推荐文章于 2025-03-17 10:31:41 发布

阅读量1.8w

点赞数 17

分类专栏： Vue 前端踩坑笔记

本文链接：https://blog.csdn.net/qq_43106115/article/details/116718459

版权

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

前端踩坑笔记

11 篇文章

订阅专栏

官方文档：

ElementUI —— InfiniteScroll 无限滚动

https://element.eleme.cn/#/zh-CN/component/infiniteScroll

根据文档这部分，写了我的代码，开始长下面这样子…结果发现了一个问题，就是进入页面之后像是 infinite-scroll-disabled和infinite-scroll-immediate没有生效似的，页面疯狂调用onLoad函数。

<div
  class="left"
  v-infinite-scroll="onLoad()"
  infinite-scroll-disabled="disabled"
  infinite-scroll-immediate="false"
>
  <div v-for="item in demoList" :key="item.commentId"
    <list-item :item="item" ></list-item>
  </div>
  <p v-if="listParams.loading">Loading...</p>
  <p v-if="listParams.finished">No More</p>
</div>

度娘许久无果，于是逐字对比官方样例……最终将

v-infinite-scroll="onLoad()"

改为

v-infinite-scroll="onLoad"

成功解决问题…

放一个能正常运行的代码上来

<template>
  <div class="container">
    <div
      class="left"
      v-infinite-scroll="onLoad"
      infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="false"
    >
      <div v-for="item in demoList" :key="item.commentId">
        <list-item
          :item="item"
        ></list-item>
      </div>
      <p v-if="listParams.loading">Loading...</p>
      <p v-if="listParams.finished">No More</p>
    </div>
  </div>
</template>

<script>
import ListItem from "../../components/ListItem";
export default {
  data() {
    return {
      demoList: [],
      listParams: {
        pageNum: 1,
        pageSize: 10,
        loading: false,
        error: false,
        finished: false,
      },
    };
  },
  components: {
    ListItem,
  },
  created() {
    this.getDemoList();
  },
  mounted() {},
  computed: {
    disabled() {
      console.log(
        this.listParams.loading || this.listParams.finished
      );
      return this.listParams.loading || this.listParams.finished;
    },
  },
  methods: {
    onLoad() {
      this.listParams.loading = true;
      if (this.listParams.finished == false) {
        this.listParams.pageNum++;
        this.getDemoList();
      }
    },
    getDemoList() {
      var that = this;
      var params = {
        pageNum: that.listParams.pageNum,
        pageSize: that.listParams.pageSize,
      };
      this.$api.myHistoryController
        .getDemoList(params)
        .then((res) => {
          if (res.status == 1000) {
            if (res.body.list.length > 0) {
              that.demoList = that.demoList.concat(res.body.list);
              that.listParams.loading = false;
              if (res.body.list.length < that.listParams.pageSize) {
                that.listParams.finished = true;
              }
            } else {
              that.listParams.loading = false;
              that.listParams.finished = true;
            }
          }
          that.listParams.loading = false;
        })
        .catch(function () {
          that.listParams.error = true;
          that.listParams.loading = false;
        });
    },
  },
};
</script>

<style scoped>
#header {
  display: none;
}
.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 10px;
}
.left {
  width: 400px;
  flex-shrink: 0;
  background-color: white;
  overflow: auto;
}
</style>