中国交通建设集团官网_网络推广员为什么做不长_广告精准推广平台_媒体软文推广平台

在数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！

好久不见！话不多说，直接上代码！！！！！！！！！！

一、利用scrollTop、定时器实现滚动效果

scrollTop为元素滚动条滚动距离

roll(t) {var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var table = document.getElementById("table");table.scrollTop = 0; // 开始无滚动时设为0 滚动距离// 当内容小于父元素不实现滚动if (box1.scrollHeight >= table.scrollHeight) {box2.innerHTML = box1.innerHTML;}this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快// 鼠标移入div时暂停滚动table.onmouseover = () => {clearInterval(this.timer);}// 鼠标移出div后继续滚动table.onmouseout = () => {this.timer = setInterval(this.rollStart, t);}},rollStart() {// 上面声明的DOM对象为局部对象需要再次声明var box1 = document.getElementById("box1");var table = document.getElementById("table");// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0,scrollTop滚动条滚动的距离if (table.scrollTop >= box1.scrollHeight) {table.scrollTop = 0;} else {table.scrollTop += 1;}}

二、效果展示

三、完整代码实现

<template><div><div class="cont"><div class="title-cont"><div class="title" v-for="item in titleList">{{ item.title }}</div></div><div class="table" id="table"><div id="box1"><div class="content" v-for="item in tableData"><div class="item">{{ item.name }}</div><div class="item">{{ item.phone }}</div><div class="item">{{ item.age }}</div></div></div><div id="box2"></div></div></div></div>
</template><script>
export default {data() {return {titleList: [{title: '姓名'},{title: '电话'},{title: '年龄'}],tableData: [{name: '张三',phone: '1515151',age: '23'},{name: '李四',phone: '1515151',age: '23'},{name: '王五',phone: '1515151',age: '23'},{name: '赵六',phone: '1515151',age: '23'},{name: '田七',phone: '1515151',age: '23'},{name: '田八',phone: '1515151',age: '23'},{name: '张三丰',phone: '1515151',age: '23'},{name: '张无忌',phone: '1515151',age: '23'}],timer: null,}},mounted() {this.$nextTick(() => {this.roll(20);})},methods: {roll(t) {var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var table = document.getElementById("table");table.scrollTop = 0; // 开始无滚动时设为0 滚动距离if (box1.scrollHeight >= table.scrollHeight) {box2.innerHTML = box1.innerHTML;}this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快// 鼠标移入div时暂停滚动table.onmouseover = () => {clearInterval(this.timer);}// 鼠标移出div后继续滚动table.onmouseout = () => {this.timer = setInterval(this.rollStart, t);}},rollStart() {// 上面声明的DOM对象为局部对象需要再次声明var box1 = document.getElementById("box1");var table = document.getElementById("table");// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0,scrollTop滚动条滚动的距离if (table.scrollTop >= box1.scrollHeight) {table.scrollTop = 0;} else {table.scrollTop += 1;}}}
}
</script><style lang="scss" scoped>
.cont {width: 50vw;height: 50vh;margin: 0 auto;.table {margin: 0 auto;width: 300px;height: 200px;border: 1px solid #ddd;overflow: hidden;.content {width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;.item {width: 100px;height: 40px;text-align: center;line-height: 40px;}}}.title-cont {display: flex;align-items: center;justify-content: center;.title {width: 100px;height: 40px;text-align: center;line-height: 40px;border: 1px solid #333;&:not(&:first-of-type) {border-left: none;}}}}
</style>