vue实现列表自动滚动效果

news2024/11/17 11:39:25

效果如图:

1.下载插件

npm install vue-seamless-scroll --save

 2.在main.js中引入注册

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

3.在页面中使用(写一个固定的表头 el-table:show-header="status" 设置为false,自带的表头不显示)

 <div class="table-box">
       //静态表头
      <div class="toptitle">
        <div class="item">序号</div>
        <div class="item">检测点</div>
        <div class="item">时间</div>
        <div class="item">识别项</div>
        <div class="item">结果</div>
      </div>
       //滚动组件
      <vue-seamless-scroll :data="tableData" :class-option="optionHover" class="seamless-warp">
        <el-table :data="tableData" @row-click="showRowDetail" style="width: 100%"  :show-header="status"
           :row-class-name="tableRowClassName">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="siteName" label="检测点">
            <template slot-scope="scope">
              <span>{{ scope.row.siteName ? scope.row.siteName : '---' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ts" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.ts ? scope.row.ts : '---' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fun" label="识别项">
            <template slot-scope="scope">
              <span>{{ scope.row.fun == "valve" ? '炉门' : scope.row.fun == "rod" ? '摆臂' : '---' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="err" label="结果">
            <template slot-scope="scope">
              <span>{{ scope.row.err === 0 ? '正常' : scope.row.err === 1 ? '异常' : '---' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </vue-seamless-scroll>

    </div>

4.js配置滚动插件配置对象

 computed: {
    optionHover() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 20, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  }

3.效果图样式

<style lang="scss" scoped>
.right-box {
  height: 36%;

  .table-box {
    height: 85.2%;
    background: #051f51;
  }

}

.seamless-warp {
  height: 200px;
  overflow: hidden;
}

/deep/ .el-table {
  background: transparent !important;
}
//隔行换色
/deep/ .el-table .even-row td {
  background-color: #082959 !important;
  color: #47e2ff;
}

/deep/ .el-table .odd-row td {
  background-color: #051f51 !important;
  color: #47e2ff;
}

/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border: none;
}

/deep/.el-table--border::after,
/deep/.el-table--group::after,
/deep/.el-table::before {
  background-color: transparent !important;
}

/deep/.el-table .cell {
  text-align: center;
}
//设置固定表头样式,保证滚动时候表头固定不动
.toptitle {
  width: 100%;
  display: flex;

  .item {
    width: 20%;
    text-align: center;
    color: #fff;
    background: #093376;
    padding: 10px;
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/972546.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式虚拟仿真实验教学平台使用教程之搭建课程计划

嵌入式虚拟仿真实验教学平台使用教程之创建课程计划 所谓「课程计划」就是将一系列实验按照一定的顺序组织成一个教学计划&#xff0c;和传统的教学计划模式比较类似。接下来我将为大家讲解如何通过该平台创建属于自己的课程计划。 嵌入式虚拟仿真实验教学平台提供了两种创建课…

Python综合案例(基本地图使用)

一、基本地图的使用 基本代码&#xff1a; """ 演示地图可视化的基本使用 """ from pyecharts.charts import Map from pyecharts.options import VisualMapOpts# 准备地图对象 map Map() # 准备数据 data [("北京", 99),("…

js获得相对路径文件,并上传到服务器

如何通过js获得相对路径文件 已知一个相对路径文件&#xff0c;如何使用js将该文件读取为File格式&#xff0c;最后上传到服务器中呢。 1.最简单的解决方案——fetch 代码 import ./index.scss// js通过相对路径获取文件 function FetchGetLocalFile() {const fetchLocalFile …

【0904作业】QT 完成登陆界面跳转到聊天室+完成学生管理系统的查找和删除功能

一、完成登陆界面跳转到聊天室 1> 项目结构 2> 源码 ① .pro ②main #include "mywnd.h" #include"chatCli.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MyWnd w;w.show();Form f;QObject::co…

【LeetCode算法系列题解】第51~55题

CONTENTS LeetCode 51. N 皇后&#xff08;困难&#xff09;LeetCode 52. N 皇后 II&#xff08;困难&#xff09;LeetCode 53. 最大子序和&#xff08;中等&#xff09;LeetCode 54. 螺旋矩阵&#xff08;中等&#xff09;LeetCode 55. 跳跃游戏&#xff08;中等&#xff09; …

【深入解析spring cloud gateway】07 自定义异常返回报文

Servlet的HttpResponse对象&#xff0c;返回响应报文&#xff0c;一般是这么写的&#xff0c;通过输出流直接就可以将返回报文输出。 OutputStream out response.getOutputStream(); out.write("输出的内容"); out.flush();在filter中如果发生异常&#xff08;例如…

如何使用GPT引领前沿与应用突破之GPT4科研实践技术与AI绘图

GPT对于每个科研人员已经成为不可或缺的辅助工具&#xff0c;不同的研究领域和项目具有不同的需求。例如在科研编程、绘图领域&#xff1a; 1、编程建议和示例代码: 无论你使用的编程语言是Python、R、MATLAB还是其他语言&#xff0c;都可以为你提供相关的代码示例。 2、数据可…

TypeScript_树结构-BST树

树结构 树的特点 树通常有一个根。连接着根的是树干树干到上面之后会进行分叉成树枝&#xff0c;树枝还会分又成更小的树枝在树枝的最后是叶子 树的抽象 树可以模拟生活中的很多场景&#xff0c;比如&#xff1a;公司组织架构、家谱、DOM Tree、电脑文件夹架构 优秀的哈希函…

神策数据 CJO 系列丨解密 CJO:连接体验的下一个前沿趋势

10 余年前&#xff0c;市场营销的焦点聚集在增长黑客如何利用 AARRR 模型&#xff08;获取 Acquisition、激活 Activation、留存 Retention、收入 Revenue、传播 Referral&#xff09;来推动并加速企业的生长发展。我们曾相信&#xff0c;在 AARRR 漏斗中&#xff0c;只要我们吸…

宝塔面板定时监控和重启MySQL数据库(计划任务)

往期教程 如果还有不了解宝塔面板怎么使用的小伙伴&#xff0c;可以看下我总结的系列教程&#xff0c;保证从新手变老鸟&#xff1a; 【建站流程科普】 个人和企业搭建网站基本流程及六个主要步骤常见的VPS主机运维面板汇总—网站运维面板云服务器&#xff0c;VPS&#xff0…

76 # koa 上下文的实现原理

上一节实现了 koa 基本逻辑实现以及属性的扩展&#xff0c;下面继续实现上下文的实现 ctx 跟 proto 的关系 ctx.__proto__.__proto__ protoMDN&#xff1a;defineGetter 备注&#xff1a; 此特性已弃用&#xff0c;建议使用对象初始化语法或 Object.defineProperty() API 来…

《职场情绪稳定:内在的力量与策略》

近期发生的新闻热点&#xff0c;如大规模裁员、创业公司倒闭、公共卫生事件等&#xff0c;让公众更加关注稳定情绪和心理健康的问题。在职场中&#xff0c;我们常常遇到各种挑战和压力&#xff0c;如何保持稳定的情绪成了一个重要的话题。 首先&#xff0c;让我们分享一些工作中…

RecyclerView的smooth scroller -- 诸多案例

作者&#xff1a;snwrking 最近碰到好几个使用LinearSmoothScroll(下方简称为LSS)的场景, 让我对这个类的了解更加进一步, 所以分享在这, 希望对有需要的同学有所帮助. 我个人不太喜欢太理论的东西, 所以整篇文章几乎全是我做过的案例, 也方便也有类似需求的同学对号入座地取用…

【用unity实现100个游戏之8】用Unity制作一个炸弹人游戏

文章目录 前言素材开始一、绘制地图二、玩家设置三、玩家移动四、玩家四方向动画运动切换 五、放置炸弹六、生成爆炸效果七、墙壁和可破坏障碍物的判断八、道具生成和效果九、玩家死亡十、简单的敌人AI十一、虚拟摇杆 待续源码完结 前言 我们将在这个视频中&#xff0c;学习如…

Oracle 遍历变量游标

背景 由于我们的数据库系统中的游标特别多&#xff0c;DBA让我们优化&#xff0c;减少游标的使用。 电脑系统&#xff1a;windows数据库&#xff1a;Oracle数据库图形化界面工具&#xff1a;Toad&#xff0c;DBeaver(我測試的時候用的)记录日期&#xff1a;2023-09-04 具体实…

macbookpro怎么删除软件没有鼠标

macbookpro怎么删除软件没有鼠标,macbookpro触摸板可以替代鼠标进行操作。左右键功能与鼠标相同&#xff0c;可用于执行删除操作。此外&#xff0c;还可以利用键盘上的Delete键来删除选中的文件。 删除软件方法 方法1、打开应用程序&#xff0c;键盘按住control&#xff0c;加点…

解决微信小程序recycle-view使用百分比单位控制宽高时出现的内容溢出问题

recycle-view是微信小程序官方推出的一个经过优化的长列表组件&#xff0c;但是在使用百分比单位控制高宽时有个内容溢出问题&#xff0c;虽然它提供了height和width的参数可以设置宽高&#xff0c;但每次写列表都需要去js里获取宽高并设置是较为麻烦的&#xff0c;所以现在来着…

Vue 3 基础(二)基础 1

API 参考 1、创建一个 Vue 应用 1.1 应用实例 每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例&#xff1a; import { createApp } from vueconst app createApp({/* 根组件选项 */ })1.2 根组件 我们传入 createApp 的对象实际上是一个组件&#xff0c;每个…

uni-app 之 图片

uni-app 之 图片 获取图片 v-bind 动态绑定 image.png <template><view><view>--- 获取图片1 ---<image src"../../static/img/tabbar_home1.png"></image></view><view>--- 获取图片2 v-bind 动态绑定---<image v-bi…