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

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

最终效果图如下：

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"了

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 = 70var 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>
```完成！！！

element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升相关推荐

vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
相关技巧,详见注释 <template><div class="container"><h2>{{ mu ...
手写实现timeline时间线组件
先看效果图 template部分 <div class="g-steps"><div class="steps-list" v-if=&quo ...
vue组件的动态加载
平常的vue项目开发,已经很难遇见一千行,甚至几千行代码的页面了,毕竟大家都会去拆分组件.但如果一个页面需要通过十几个组件或者几十个组件中的某几个组件去排列组合渲染,此时用动态加载就很有必要了. ...
用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
element ui el-dialog 居中，并且内容多的时候内部可以滚动
element ui el-dialog 居中,并且内容多的时候内部可以滚动 <el-dialog title="图标设置" :visible.sync="icon ...
微信小程序Timeline时间线效果实现
微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本 wxml代码: <view class="box"><view wx:for= ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
微信小程序Timeline 时间线
微信小程序Timeline 时间线仿ElementUI的Timeline 时间线,自适应页面与文本效果图: wxml代码: <view class="status-alarm&qu ...
element cascader组件动态加载数据
最近碰到一个需要动态加载不同数据的联动功能,但是element官方给的例子比较抽象,所以花了一点时间摸索了一番,为避免下次踩坑,故记录下来. 代码示例如下: </template>< ...

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

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

1.`html`部分

2.`script`部分

element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升相关推荐

最新文章

热门文章

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

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

1.html部分

2.script部分

element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升相关推荐

最新文章

热门文章

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

1.`html`部分

2.`script`部分