[vue] 无缝滚动 vue-seamless-scroll 滚动表格

npm install vue-seamless-scroll --save

main.js

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

<template><div class="min"><div style="display: inline-block; width: 100%"><!-- 只留表头 --><el-table:data="list"style="width: 100%"class="top"><el-table-column prop="fileName" label="油库名称" align="center" /><el-table-column prop="uploadDate" label="油库编号" align="center" /><el-table-column prop="fileSize" label="总库存(m3)" align="center" /><el-table-column prop="uploadMan" label="安全高度(mm)" align="center" /><el-table-column prop="visitNum" label="安全容量(m3)" align="center" /><el-table-column prop="visitNum" label="装油高度(mm)" align="center" /><el-table-column prop="visitNum" label="油罐差压(Pa)" align="center" /><el-table-column prop="visitNum" label="查表体积(m3)" align="center" /></el-table><!-- 表格内容滚动 --><vue-seamless-scroll:data="list"class="seamless-warp"style="width: 100%":class-option="classOption"><el-table:data="list"style="width: 100%"class="bottom"><el-table-column prop="fileName" label="油库名称" align="center" /><el-table-column prop="uploadDate" label="油库编号" align="center" /><el-table-column prop="fileSize" label="总库存(m3)" align="center" /><el-table-column prop="uploadMan" label="安全高度(mm)" align="center" /><el-table-column prop="visitNum" label="安全容量(m3)" align="center" /><el-table-column prop="visitNum" label="装油高度(mm)" align="center" /><el-table-column prop="visitNum" label="油罐差压(Pa)" align="center" /><el-table-column prop="visitNum" label="查表体积(m3)" align="center" /></el-table></vue-seamless-scroll></div></div>
</template>

<script>
export default {data() {return {// 模拟数据list: [{fileName: "每天开心笑一笑",uploadDate: "2021-11-18",fileSize: "8",uploadMan: "165",visitNum: "112",},{fileName: "每天开心笑一笑",uploadDate: "2021-11-18",fileSize: "8",uploadMan: "165",visitNum: "112",},{fileName: "每天开心笑一笑",uploadDate: "2021-11-18",fileSize: "8",uploadMan: "165",visitNum: "112",},{fileName: "每天开心笑一笑",uploadDate: "2021-11-18",fileSize: "8",uploadMan: "165",visitNum: "112",},{fileName: "每天开心笑一笑",uploadDate: "2021-11-18",fileSize: "8",uploadMan: "165",visitNum: "112",},{fileName: "每天开心笑一笑",uploadDate: "2021-11-18",fileSize: "8",uploadMan: "165",visitNum: "112",}],};},computed: {// 滚动条的配置项classOption() {return {step: 0.3, // 数值越大速度滚动越快limitMoveNum: 1, // 开始无缝滚动的数据量 this.listhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},
};
</script>

.seamless-warp {height: 229px;overflow: hidden;
}.min {display: flex;width: 100%;
}.top .el-table__body-wrapper {display: none;
}.bottom .el-table__header-wrapper {display: none;width: 100%;
}

使用key来使vue-seamless-scroll重新渲染

 <vue-seamless-scroll ref="scrollModule" :data="newData"  :key="scrollKey">......</vue-seamless-scroll>

this.scrollKey = Math.random();

参考：

【el-table固定表格头循环滚动】vue结合vue-seamless-scroll操作表格自动滚动效果

Vue无缝滚动

vue-seamless-scroll 从入坑到放弃

[vue] 无缝滚动 vue-seamless-scroll 滚动表格相关推荐

QML_滚动控件Scroll
QML_滚动控件Scroll 滚动控件Scroll属性: 1. active : bool,保存滚动条是否处于活跃状态 2.horizontal : bool,保存滚动条是否为水平 3.interac ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
vue使用keep-alive缓存页面回到滚动位置
业务场景:移动端一个列表页下拉到某个位置时,点击其中一条数据进入详情页,再从详情页返回列表页时,还是在原来的位置. 实现: 1.在App.vue中加上keep-alive缓存组件. <keep- ...
vue中使用cube-ui实现横向滚动
vue中使用cube-ui实现横向滚动,可参考文档https://didi.github.io/cube-ui/#/zh-CN/docs/scroll, 下面是在编写的时候遇到的问题,做出的的总结 & ...
vue点击tab列表滚动对应位置，滚动列表也可切换tab
先看看效果: <template><div class="custom-demo-view" style="padding: 1rem;"&g ...
uniapp 文字无缝从右到左滚动
uniapp 文字无缝从右到左滚动欢迎使用ay-goLeft_r插件(正研究优化中) 最近有需求为:文字无缝左滚,整理插件代码如下: 1.ay-goLeft_r插件可去uniapp插件市场的操作组 ...
无缝滚动—marquee实现向上滚动（适合发布通告）
<marquee direction="up" width=650 height=200 scrollamount=5 scrolldelay=10 behavior=sro ...

[vue] 无缝滚动 vue-seamless-scroll 滚动表格

使用key来使vue-seamless-scroll重新渲染

[vue] 无缝滚动 vue-seamless-scroll 滚动表格相关推荐

最新文章

热门文章