标签：listParams loading false res 样例 Element finished Vue infinite

官方文档：

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: {
    onl oad() {
      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>

标签：listParams,loading,false,res,样例,Element,finished,Vue,infinite
来源： https://blog.csdn.net/qq_43106115/article/details/116718459

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。