Vue实现无限滚动加载更多内容（懒加载）或实现查看更多按钮

在Vue中实现无限滚动加载更多内容，通常可以使用vue-infinite-loading插件。以下是一个简单的例子：

1、首先，安装vue-infinite-loading：

npm install vue-infinite-loading --save

2、在Vue组件中使用它：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.content }}</li>
    </ul>
    <infinite-loading @infinite="infiniteHandler">
      <div slot="no-more">没有更多内容了</div>
    </infinite-loading>
  </div>
</template>
 
<script>
import InfiniteLoading from 'vue-infinite-loading';
 
export default {
  components: {
    InfiniteLoading,
  },
  data() {
    return {
      items: [], // 列表内容
      page: 1, // 当前页数
      hasMore: true, // 是否还有更多内容
    };
  },
  methods: {
    // 无限滚动加载的处理函数
    infiniteHandler($state) {
      // 模拟异步获取数据
      setTimeout(() => {
        if (this.page > 3) {
          // 模拟没有更多内容了
          $state.complete();
          this.hasMore = false;
        } else {
          // 模拟获取新的内容
          const moreItems = []; // 假设这是从服务器获取的新内容
          this.items = this.items.concat(moreItems);
          $state.loaded(); // 告诉插件加载完毕
          this.page++;
        }
      }, 1000);
    },
  },
};
</script>

在这个例子中，infiniteHandler方法会在组件创建时由infinite-loading触发。当用户滚动到页面底部时，会调用这个方法。在这个方法中，我们模拟了异步获取新内容的过程，并通过$state.loaded()通知infinite-loading加载完毕。如果没有更多内容可加载，则通过$state.complete()告知插件不再需要加载，并显示slot="no-more"中的内容。

3、实现查看更多按钮

如果是要手动加载的，通过点击更多按钮加载，思路简单点：
标签一样使用v-for遍历。

 <li v-for="item in items" :key="item.id">{{ item.content }}</li>

查看更多按钮

<el-button class="button" type="primary" round @click="loadMore()"  :disabled="isDisabled">查看更多</el-button>

而更多按钮点击事件只需把内容数组与新内容数组进行拼接即可。

		methods:{
			loadMore(){
				this.items = this.items.concat(moreItems);
			}
		}