百变鹏仔-专注前端行业精选
vue实现表格自动滚动功能 vue-seamless-scroll
作者：鹏仔先生日期：2024-06-28 17:08:44浏览：329分类：JavaScript
hello，大家好，我是小编鹏仔，最近做数据大屏，因为表格中数据比较多，需要实现表格自动无缝滚动效果，网上看到了此插件，挺好用，整理分享一下吧！
当然，这个插件不止可以滚动表格，像echarts或者自定义的其他样式都是可以进行滚动的，并且可以向上、向下、向左、向右都是可以滚动的，也可以调整滚动速度，鼠标悬浮停止等功能。
官网文档 https://chenxuan0000.github.io/vue-seamless-scroll/zh/
鹏仔需要实现的交互效果如下图所示
第一步我们在VUE中输入命令安装
npm install vue-seamless-scroll --save
第二步，我们在main.js中引入注册
import scroll from 'vue-seamless-scroll' Vue.use(scroll)
第三步，我们用插件标签将需要滚动的区域包裹即可
<vue-seamless-scroll :data="listData"></vue-seamless-scroll>
- 上一篇：uniapp页面跳转的几种方式
- 下一篇：微信小程序判断是安卓还是苹果
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录，页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove （elementui多选上传on-success只执行了一次，只上传成功了一条）
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有1位网友发表了看法：
鹏仔先生 评论于 [2024-06-28 17:23:36] 回复
:class-option="optionHover"
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)
};
},
}