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

已于 2023-05-22 08:10:58 修改
阅读量639 收藏 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
版权
该文章展示了如何在Vue项目中结合ElementUI和vue-seamless-scroll库创建一个类似火车时刻表的无缝滚动效果。通过设置表格组件和配置vue-seamless-scroll，可以实现数据的自动滚动展示，确保即使数据量不足也能保持滚动的连续性。
摘要由CSDN通过智能技术生成

目录

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
    评论
专栏目录
js显示屏特效火车站高铁站列车时刻表切换特效.rar
04-12
显示屏特效火车站高铁站列车时刻表切换特效， 模拟数据库读取列车时刻表数据。然后随机在页面显示滚动结果
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 4606
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。//组价使用三步骤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 简易时间线显示数据组件
碌碌无为的程序猿
08-03 2079
项目遇到2个页面要时间轴显示数据 2个页面还不一样 这鬼才UI设计师不需要引用其它依赖 纯样式编写 用组件的形式引用 cv 即可。
Vue 实现简单的时间轴 时间进度条
热门推荐
m0_61570521的博客
07-13 1万+
项目需要按天播放地图等值线图功能，所以需要一个时间进度条，百度了一下发现没有自己需要的样子，于是只能简单的写一个。1、封装时间尺度组件 2、在页面使用 3、组件init方法内 通过起止时间算出中间的所有时间尺度。 附上效果图生成刻度是用的flex布局 宽度超出自动撑开 间距固定 通过取模数组下标 每5天突出刻度尺并标记刻度时间，有不懂的可以留言，看见了会接单，时间仓促，有bug请见谅。.........
vue的无缝滚动插件：vue-seamless-scroll
欧唯薇
08-16 3024
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的无缝滚动组件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无缝滚动（无依赖关系），则可以切换到此处。 。 贡献 欢迎...
seamless-scroll:js seamless scrolling（js无缝滚动）
05-12
无缝滚动js Seamless-scroll插件 :sheaf_of_rice: | :blue_book:浏览器支持 IE 火狐浏览器 Chrome合金 苹果浏览器 的iOS 安卓IE7 + ✓ ✓ ✓ ✓ ✓ 不支持移动手势。安装NPMnpm install seamscroll --save CDN ...
简单的 vue基于elementui的无限滚动组件.txt
04-20
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
使用vue-seamless-scroll实现el-table轮播
pickinguptrash的博客
02-13 1339
要实现el-table轮播效果,并且顶部th固定,鼠标移入暂停滑动我看了好多方法，有人自己写的js，但是感觉太麻烦了，我找了半天找到了一个神器在线演示文档。
vue-seamless-scroll element table表单滚动
weixin_44286765的博客
03-11 1146
<template> <div class="boxYj"> <div class="earlyWarnin"> <div class="topImg"> <img src="../../assets/images/yj.png" alt=""> </div> <div class="IconFont"> <img src="../../a
使用vue-seamless-scroll插件，实现el-table自动滚动功能
weixin_39963518的博客
08-21 1352
使用vue-seamless-scroll插件，实现el-table自动滚动功能
写一个pc端的文字无缝滚动
qq_40711550的博客
11-26 356
``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 7666
el-table表格自动滚动
vue 基于vue-seamless-scroll实现列表滚动
果栋的博客
09-07 301
首先安装vue-seamless-scroll。应用element ui里的table组件。全局引用组件在main.js中添加如下代码。
vue-seamless-scroll实现跑马灯效果
cyx924的博客
09-01 644
电子大屏播放
jq table表格自动滚动
10-08
在 jq 中，要实现表格自动滚动，可以使用一些 CSS 属性和 JavaScript 代码来实现。下面是一个示例代码，可以实现表格自动滚动效果： HTML 代码： ```html <div id="table-container"> <table id="my-table"> <!-- 表格内容 --> </table> </div> ``` CSS 代码： ```css #table-container { width: 300px; /* 设置容器宽度 */ height: 200px; /* 设置容器高度 */ overflow: auto; /* 添加滚动条 */ } ``` JavaScript 代码： ```javascript // 当表格内容发生变化时，自动滚动到底部 function scrollToBottom() { var container = document.getElementById("table-container"); container.scrollTop = container.scrollHeight; } // 调用 scrollToBottom 函数，实现表格自动滚动 scrollToBottom(); ``` 这样，当表格内容发生变化时，滚动条会自动滚动到底部，实现了表格的自动滚动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

IT小悟

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

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

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

打赏作者

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

抵扣说明：

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

余额充值