• 3
  • 新人请关照

elementUI的无线加载怎么我每滚动一次,他就加载一条我循环到页面上的数据,而不是所有的数据

我现在这么写,他是直接加载我所有的数据10遍,我的数据一共有10条,我怎么才能滚动一次加载2条,到10条后就结束了

<template>
<div class="infinite-list-wrapper" style="overflow:auto">

<ul
  class="list"
  v-infinite-scroll="load"
  infinite-scroll-disabled="disabled">
  <li v-for="i in count" class="list-item">
   <div v-for="news in newsArticle" onclick="window.open('#/topic','_self')">
      <card>
        <img class="ima" slot="header" :src="news.pim">
        <div slot="content" class="card-padding">
          <p class="bt">{{news.title}}</p>
          <p class="time">{{news.time}}</p>
          <p class="wen">{{news.Introduction}}</p>
        </div>
      </card>
    </div>
  
  </li>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>

</div>
</template>

<script>
export default {

data () {
  return {
    count: 10,
    loading: false
  }
},
computed: {
  noMore () {
    return this.count >= 20
  },
  disabled () {
    return this.loading || this.noMore
  }
},
methods: {
  load () {
    this.loading = true
    setTimeout(() => {
      this.count += 2
      this.loading = false
    }, 2000)
  }
}

}
</script>

阅读 614
评论
    1 个回答
    • 314

    滚动到底部的时候会触发你定义的load函数,你要在load函数里,在你遍历的newsArticle数组里追加2个元素(一般这时候调用后台接口获取新增加的数据),从而实现滚动加载。
    修改方法:
    1.去掉: v-for="i in count"
    2.

    load () {
        this.loading = true
        setTimeout(() => {
          this.newsArticle.concat(addItemList);
          this.loading = false
        }, 2000)
    }
      撰写回答

      登录后参与交流、获取后续更新提醒