vue大屏开发列表无缝滚动vue-seamless-scroll / vue3-seamless-scroll

又耳邓&丘山岳

已于 2025-02-25 16:25:07 修改

阅读量1.2k

点赞数 11

分类专栏： echarts 实际开发中功能实现文章标签： vue.js javascript ecmascript

于 2024-03-12 14:23:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67796383/article/details/136650549

版权

本文介绍了如何在Vue项目中使用vue-seamless-scroll插件实现无缝滚动效果，包括安装、全局注册以及如何在组件中使用。还展示了如何通过CSS和Vuemethods控制滚动行为和滚动条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用插件 vue-seamless-scroll (在vue2中使用)

官网地址：vue-seamless-scroll的简介及使用教程 - Made with Vuejs
安装：

npm install vue-seamless-scroll --save

全局注册：

main.js文件里

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

使用：

在所需页面引用

import vueSeamlessScroll from 'vue-seamless-scroll'

<vue-seamless-scroll class="scroll_table" :data="tableHistoryData" :class-option="classOption" :scroll="isScrolling">
                        <div v-for="(v, i) in tableHistoryData" :class="v.errorType == 1 ? 'even_number' : '_'"
                            @click="vulcanizationModel(v)"> <!--   -->
                            <span>{
  { i + 1 }}</span>
                            <span><img v-if="v.errorType == 0 && v.errorMsg"
                                    src="../../assets/productOverTime_right.png" alt=""
                                    style="margin-right: 6px;margin-top: -2px;"><img
                                    v-if="v.errorType == 1 && v.errorMsg" src="../../assets/changeOverTime_right.png"
                                    alt="" style="margin-right: 6px;margin-top: -2px;;">{
  { v.errorMsg }}</span>
                            <span>{
  { v.createTime }}</span>
                        </div>
                    </vue-seamless-scroll>





data() {
        // let D = new Date().getTime();
        return {
isScrolling: true,//判断是否滚动
classOption: {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                // singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 2000
            }
}
}

methods: {
        //需要点击列表停止滚动
            vulcanizationModel() {
            this.classOption.step=0 //停止滚动，step=0
        },
        
          // 继续滚动
        closeModal() {
            this.classOption.step=0.4 //继续滚动滚动，step=0
        },

}


css：
.scroll_table {
                    width: 100%;
                    height: 752px;