百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

vue实现表格自动滚动功能 vue-seamless-scroll

作者:鹏仔先生日期:2024-06-28 17:08:44浏览:1013分类:JavaScript

hello,大家好,我是小编鹏仔,最近做数据大屏,因为表格中数据比较多,需要实现表格自动无缝滚动效果,网上看到了此插件,挺好用,整理分享一下吧!

当然,这个插件不止可以滚动表格,像echarts或者自定义的其他样式都是可以进行滚动的,并且可以向上、向下、向左、向右都是可以滚动的,也可以调整滚动速度,鼠标悬浮停止等功能。


官网文档 https://chenxuan0000.github.io/vue-seamless-scroll/zh/


鹏仔需要实现的交互效果如下图所示

vue实现表格自动滚动功能


第一步我们在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>



手机扫码访问

已有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)
    };
    },
    }

取消回复欢迎 发表评论:

关灯