element-ui组件通过InfiniteScroll实现无限滚动

通过InfiniteScroll实现无限滚动主要在于设置容器设置一个固定的高度，这样鼠标滚动到容器底部的时候就会触发load方法，然后通过concat连接数组。

<template>

  <div class="infinite">

    <el-timeline class="infinite-list" v-infinite-scroll="load" style="overflow:auto">

      <el-timeline-item :timestamp="item.item" placement="top" v-for="(item,index) in list" :key="index">

        <el-card>

          <div class="title">{{item.title}}</div>

          <div class="content">{{item.content}}</div>

        </el-card>

      </el-timeline-item>

    </el-timeline>

  </div>

</template>

<script>

export default {

  name: "index",

  data() {

    return {

      list: [

        {title: '更新 Github 模板',content: '王小虎 提交于 2018/4/12 20:46', date: '2018/4/12'},

        {title: '更新 Github 模板',content: '王小虎 提交于 2018/4/12 20:46', date: '2018/4/12'},

        {title: '更新 Github 模板',content: '王小虎 提交于 2018/4/12 20:46', date: '2018/4/12'},

      ]

    };

  },

  components: {},

  created() {},

  methods: {

    load() {

      this.list.push({title: '更新 Github 模板',content: '王小虎 提交于 2018/4/12 20:46', date: '2018/4/12'})

    }

  },

};

</script>

<style lang="less" scoped>

.infinite-list{

  height: 768px;

  .title{

    padding: 20px;

  }

  .content{

    padding: 20px;

  }

}

</style>

本文章由javascript技术分享原创和收集