引入 npm install vue-seamless-scroll --save
在找到 main.js 引入
import scroll from 'vue-seamless-scroll' Vue.use(scroll)
主要代码
<template> <div id="app"> <div class="backround"> <div class="toptitle"> <div class="item">日期</div> <div class="item">标题</div> <div class="item">地址</div> </div> <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp"> <el-table :data="listData" border :show-header="status" > <el-table-column prop="date" label="日期" > </el-table-column> <el-table-column prop="title" label="标题" > </el-table-column> <el-table-column prop="test" label="地址" > </el-table-column> </el-table> </vue-seamless-scroll> </div> </div> </template> <script> export default { data () { return { status:false, listData: [ { 'title': '无缝滚动第一行无缝滚动第一行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, { 'title': '无缝滚动第二行无缝滚动第二行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, { 'title': '无缝滚动第三行无缝滚动第三行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, { 'title': '无缝滚动第四行无缝滚动第四行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, { 'title': '无缝滚动第五行无缝滚动第五行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, { 'title': '无缝滚动第六行无缝滚动第六行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, { 'title': '无缝滚动第七行无缝滚动第七行', 'date': '2017-12-16', 'test':'测试', 'test2':'测试2', 'test3':'测试3' }, ] } }, computed: { optionHover() { return { step: 0.5, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000, // 单步运动停止的时间(默认值1000ms) }; }, } } </script> <style scoped> .backround{ width: 100%; height: 200px; background-color: #000c17; } /deep/ .el-table, /deep/ .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td { background-color: transparent; color:white } .seamless-warp{ height: 200px; overflow: hidden; } /deep/.el-table .cell{ text-align: center; } /deep/.toptitle{ width: 100%; display: flex; background-color: gainsboro; margin-bottom: 10px; border:2px solid gainsboro; background-color: transparent; color:white } .item{ width: 33.3%; border-right:2px solid gainsboro; text-align: center; } </style>
标签:test3,vue,滚动,title,seamless,test2,测试,scroll,无缝 From: https://www.cnblogs.com/easyjie/p/16866360.html