element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载—

这篇具有很好参考价值的文章主要介绍了element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近看到同事在弄日志记录，需要实现的效果是：

自动滚动+无限滚动+动态加载数据

最终效果图如下：
elementui timeline,前端基础知识,js必会知识点,javascript知识点,ui,javascript,vue.js

1.html部分

<template>
  <div id="boxTimeline" v-infinite-scroll="fnLoadMore" :infinite-scroll-distance="ovISD">
    <el-timeline id="timeline1">
      <el-timeline-item v-for="(items,index) in tableData" :key="index" :timestamp="items.createTime" placement="top">
        <el-card>
          <h4 v-html="resTxt(items.content)"></h4>
          <p>跟进人：{{ items.person }}　　跟进方式：{{resRecordType(items.type)}}</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item v-if="loadPage">
        <el-card ><i class="el-icon-loading"></i> 加载更多中..</el-card>
      </el-timeline-item>
    </el-timeline>
    <el-timeline id="timeline2">
      <el-timeline-item v-for="(items,index) in tableData" :key="index" :timestamp="items.createTime" placement="top">
        <el-card>
          <h4 v-html="resTxt(items.content)"></h4>
          <p>跟进人：{{ items.person }}　　跟进方式：{{resRecordType(items.type)}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

解析：为了实现无限滚动，需要做两块一模一样的内容来回交替显示，也就是上面代码中的id="timeline1"和id="timeline2"了文章来源地址https://www.toymoban.com/news/detail-516192.html

2.script部分

<script>
import {getWebCpnRecordList} from "@/api/web";//接口地址
import {resRecordTypes, resTextRN_br} from "@/api/common";//接口地址
export default{
  name: "inc_detail_log",
  props:['mid'],
  data(){
    return{
      loadPage:false,loadMore:true,
      tableData:[],ovISD:0,orgHeight:0,
      pagination: {pageSize:10,current:1,totalCount:0,pages:0},
    }
  },
  mounted() {
    this.filterSearch();
  },
  methods:{
    resRecordType(type){return resRecordTypes(type)},
    resTxt(text){return resTextRN_br(text)},
    fnLoadMore(){
      if (this.loadMore && this.pagination.current < this.pagination.pages){
        this.pagination.current++
        this.filterSearch()
      }
    },
    //列表
    filterSearch(page){
      if(typeof(page)=='number'){
        this.pagination.current = page;
      }
      this.fetch();
    },
    async fetch() {
      this.loadPage = true;
      this.loadMore = false;
      getWebCpnRecordList(this.mid,this.pagination.current,this.pagination.pageSize).then(data=>{
        data = data.data;
        const pagination = {...this.pagination};
        pagination.totalCount = data.total;
        pagination.pages = data.pages;
        for (let i in data.rows){
          data.rows[i].load = false;
        }
        this.tableData = this.tableData.concat(data.rows);
        if (this.pagination.current==1) this.moveUp();
        this.pagination = pagination;
      }).finally(()=>{
        this.loadPage = false;
        this.loadMore = true;
        var org = document.getElementById("timeline1");
        this.orgHeight = org.offsetHeight;
        this.ovISD = this.orgHeight + 100;
      })
    },
    moveUp(){
      var speed = 70
      var org = document.getElementById("timeline1");
      var org1 = document.getElementById("timeline2");
      var organization = document.getElementById("boxTimeline");
      function Marquee() {
        if (org1.offsetTop - organization.scrollTop <= 100){
          // vues.methods.fnLoadMore()
          organization.scrollTop -= org.offsetHeight;
        } else {
          organization.scrollTop++
        }
      }

      let MyMar = setInterval(Marquee, speed)
      organization.onmouseover = function () { clearInterval(MyMar) }
      organization.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
    },
    handleSizeChange(val) {
      this.pagination = {
        pageSize:val,current:1,totalCount:0,
      };
      this.filterSearch();
    },
  }
}
</script>
```
#  3.`css`部分
```css
<style scoped>
#boxTimeline{overflow:auto; padding:20px; height:600px; width:60%; margin:0 auto}
#boxTimeline::-webkit-scrollbar{display: none}
p.pCnt{line-height:1.8em}
.el-timeline h4{margin-top:0; line-height:1.6em}
</style>
```

完成！！！