使用Vue+ElementUI+VUE-Seamless-Scroll实现火车时刻表滚动功能

已于 2023-05-22 08:10:58 修改
阅读量629 收藏 4
点赞数
分类专栏： Web前端 Vue.js 文章标签： vue.js elementui 前端
于 2023-03-18 22:22:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/speedwalkman/article/details/129644048
版权

目录

1.环境：

2.代码:

3.最后结果:

4.注意:

1.环境：

1）Vue

2）Element UI

3）安装 vue-seamless-scroll

      npm：

npm install vue-seamless-scroll --save

    静态页面：

<script src="vue-seamless-scroll.min.js"></script>

2.代码:

<template>
    <div class="content">

            <section style="height: 1340px">

              <el-table style="width: 100%; height:100px;"
                        :header-cell-class-name="getHeadRowClass" >
                <el-table-column prop="order" label="序号" width="100px" height="100px"></el-table-column>
                <el-table-column prop="name" label="企业名称" width="400px"  height="100px" ></el-table-column>
                <el-table-column prop="month" label="列1" width="235px"  height="100px"></el-table-column>
                <el-table-column prop="daily" label="列2"  width="235px"  height="100px"></el-table-column>
                <el-table-column prop="hour" label="列3"  width="235px"  height="100px"></el-table-column>
                <el-table-column prop="guishang" label="列4"  width="100px"  height="100px"></el-table-column>
                <el-table-column prop="status" label="列5"  width="100px"  height="100px"></el-table-column>
                <el-table-column prop="substatus" label="列6"  width="260px"  height="100px"></el-table-column>
              </el-table>

              <vue-seamless-scroll :data="companyList"  class="auto-scorll-table" :class-option="classOption">
                <el-table
                          :data="companyList"
                          class="custom-table-2 hidden-thead"
                          :show-header="false"
                          :stripe="true"
                          :header-cell-class-name="getItemRowClass">
                  <el-table-column prop="order" label="序号" width="100px" height="100px"></el-table-column>
                  <el-table-column prop="name" label="企业名称" width="400px"  height="100px" ></el-table-column>
                  <el-table-column prop="month" label="列1" width="235px"  height="100px"></el-table-column>
                  <el-table-column prop="daily" label="列2"  width="235px"  height="100px"></el-table-column>
                  <el-table-column prop="hour" label="列3"  width="235px"  height="100px"></el-table-column>
                  <el-table-column prop="guishang" label="列4"  width="100px"  height="100px"></el-table-column>
                  <el-table-column prop="status" label="列5"  width="100px"  height="100px"></el-table-column>
                  <el-table-column prop="substatus" label="列6"  width="260px"  height="100px"></el-table-column>
                </el-table>
              </vue-seamless-scroll>

            </section>
    </div>
</template>

<script>

export default {
  name: "LeftBox1",
  components: {

  },
  data() {
    return {
      companyList: [{
        'order':1,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'

      }, {
        'order':2,
        'name': '无缝滚动第一行无缝滚动第一行无缝滚动第一行无缝滚动第一行无缝滚动第一行无缝滚动第一行无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'

      }, {
        'order':3,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      }, {
        'order':4,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      }, {
        'order':5,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      }, {
        'order':6,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      }, {
        'order':7,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      }, {
        'order':8,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      }, {
        'order':9,
        'name': '无缝滚动第一行无缝滚动第一行',
        'month': 123123213,
        'daily': 123123123,
        'hour': 12312312,
        'guishang':'是',
        'status':'生产'
      },
      ...],
    }
  },
  async mounted() {
        this.init();
  },
  methods: {
    init(){
      this.getCompanyList();
    },
    getCompanyList(){
      let that = this;
      this.$axios({
        method: "get",
        url: `/api/Company/companyInfoList`,
        params: {'date': this.$parent.endData },
        headers: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
      }).then((res) => {
        if (res.data.code != 200) {
          return null;
        }
        that.companyList = []

        for (let i = 0; i < res.data.data.length; i++) {
          let item = res.data.data[i]
          item.month = (item.month/10000).toFixed(2);
          that.companyList.push(item);
        }
      });
    },
    getHeadRowClass() {
      return 'headerTitle';
    },
    getItemRowClass(){
      return 'itemStyle';
    } 
  },
  computed: {
    classOption () {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: this.companyList.length, // 开始无缝滚动的数据量 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 lang="scss" scoped>

.content {
  width: 100%;
  height: 1650px;
  padding-top: 112px;
  padding-left: 159px;
  padding-right: 94px;
  title{

  }
}
.content /deep/ .el-table--fit{
  text-align: center;
}

.content /deep/  .el-table, .el-table__expanded-cell {
  background-color: transparent;
}

.content /deep/ .el-table tr {
  background-color: transparent!important;
  height: 100px;
}
.content /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
  background-color: transparent;
}

.content /deep/ .el-table .headerTitle {
  background: #073265;
  font-size: 28px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  height:100px
}

.content /deep/ .el-table .headerTitle .cell {
 line-height: 30px;
}

.content /deep/ .el-table--enable-row-transition .el-table__body td,
                .el-table .cell .itemStyle{

  font-size: 28px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;

}

.content /deep/ .el-table .cell{
  line-height: 35px;
}
</style>

3. 最后结果:

最后执行结果，就像是我们在火车站看见的列车时刻表一样，从下到上滚动显示每条信息：

使用VUE+ElementUI实现火车时刻表滚动功能

4.注意:

     如果我们的数据集合数量不够，会导致显示的时候不能出现连续滚动的情况，这时候，我们只要将我们的数据集合进行适当的扩充。例如，companyList里面包含3条数据{A,B,C}, 我们只需要将companyList里面的内容，重复的填充成为{A,B,C,A,B,C,A,B,C,A,B,C}  

    官网地址 vue-seamless-scroll

IT小悟
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
推荐开源项目：departure-board——复古车站离站显示屏的现代重现
gitblog_00100的博客
06-04 225
推荐开源项目：departure-board——复古车站离站显示屏的现代重现 项目地址:https://gitcode.com/paulcuth/departure-board 在数字时代寻找怀旧的触感？【departure-board】项目将您带回那个车站显示屏缓缓滚动的时代，但这次，它是在现代浏览器上以JavaScript和CSS3的魔力呈现。作为一项实验性项目，开发者保罗·卡瑟伯顿探索了如何...
vue表格自动滚动
01-08
安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden; .item li{ height: 50px; display: flex;
vue-seamless-scroll插件，使用详细（ vue-seamless-scroll 无缝滚动）_vue3-seamless-scroll
最新发布
2401_84434880的博客
05-16 3334
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。//组价使用三步骤1、引入 2、注册 3、使用。
vue-seamless-scroll
sx0809的博客
05-29 1493
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initia...
vue的无缝滚动插件：vue-seamless-scroll
欧唯薇
08-16 3015
1、npm安装 npm install vue-seamless-scroll --save 2、引入 import scroll from 'vue-seamless-scroll' 官方demo:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 3、使用 ...
Vue 实现简单的时间轴 时间进度条
热门推荐
m0_61570521的博客
07-13 1万+
项目需要按天播放地图等值线图功能，所以需要一个时间进度条，百度了一下发现没有自己需要的样子，于是只能简单的写一个。1、封装时间尺度组件 2、在页面使用 3、组件init方法内 通过起止时间算出中间的所有时间尺度。 附上效果图生成刻度是用的flex布局 宽度超出自动撑开 间距固定 通过取模数组下标 每5天突出刻度尺并标记刻度时间，有不懂的可以留言，看见了会接单，时间仓促，有bug请见谅。.........
vue 简易时间线显示数据组件
碌碌无为的程序猿
08-03 2065
项目遇到2个页面要时间轴显示数据 2个页面还不一样 这鬼才UI设计师不需要引用其它依赖 纯样式编写 用组件的形式引用 cv 即可。
vue的无缝滚动组件vue-seamless-scroll实例
08-28
Vue 无缝滚动组件 Vue-Seamless-Scroll 实例 ...Vue-Seamless-Scroll 是一个功能强大且易用的无缝滚动组件，提供了简洁易用的 API，帮助开发者快速实现无缝滚动效果。通过配置选项和事件，可以实现更多的交互效果。
vue vue-seamless-scroll 数据滚动
03-28
vue vue-seamless-scroll 数据滚动 list 数据量少 时，不运行滚动
vue-seamless-scroll:A simple, seamless scrolling for Vue.js vue无缝滚动component
05-10
vue-seamless-scroll Vue.js的简单无缝​​滚动 特征 初始配置支持 兼容多种平台 多技术堆栈版本支持 文献资料 要查看和文档，请访问 。 关怀 如果您希望js无缝滚动（无依赖关系），则可以切换到此处。 。 贡献 欢迎...
简单的 vue基于elementui的无限滚动组件.txt
04-20
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
vue-animate-onscroll：一个简单的组件，可在元素滚动到视图中时对其进行动画处理
02-03
Vue动画控制一个简单的Vue指令，可在元素滚动到视图中时对其进行动画处理。安装npm install vue-animate-onscroll# oryarn add vue-animate-onscroll建立导入到您的Vue应用程序import Vue from 'vue'import ...
使用vue-seamless-scroll实现el-table轮播
pickinguptrash的博客
02-13 1324
要实现el-table轮播效果,并且顶部th固定,鼠标移入暂停滑动我看了好多方法，有人自己写的js，但是感觉太麻烦了，我找了半天找到了一个神器在线演示文档。
vue-seamless-scroll element table表单滚动
weixin_44286765的博客
03-11 1145
<template> <div class="boxYj"> <div class="earlyWarnin"> <div class="topImg"> <img src="../../assets/images/yj.png" alt=""> </div> <div class="IconFont"> <img src="../../a
写一个pc端的文字无缝滚动
qq_40711550的博客
11-26 351
``1 <div id="box"> <ul id="con1" ref="con1" :class="{anim:animate==true}"> <li v-for='item in items' :key="item">{{item.name}}</li> </ul> </div> export default { data() { return { animate
el-table表格自动滚动
木木木华的博客
07-26 7346
el-table表格自动滚动
使用vue-seamless-scroll插件，实现el-table自动滚动功能
weixin_39963518的博客
08-21 1311
使用vue-seamless-scroll插件，实现el-table自动滚动功能
vue 基于vue-seamless-scroll实现列表滚动
果栋的博客
09-07 300
首先安装vue-seamless-scroll。应用element ui里的table组件。全局引用组件在main.js中添加如下代码。
vue-seamless-scroll实现跑马灯效果
cyx924的博客
09-01 641
电子大屏播放
在vue3+ts+vite项目中使用vue3-seamless-scroll
05-11
2. 在需要使用无缝滚动的组件中，引入 `vue3-seamless-scroll`： ```vue <vue3-seamless-scroll :list="list" :speed="speed" :itemWidth="itemWidth"> <div v-for="(item, index) in list" :key="index">{{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT小悟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值