草庐IT

表格改成轮播表格效果

littleH 2023-03-28 原文

表格改成轮播表格效果

//使用表格组件
<el-table ref="waitTable" :data="waitApproData" style="margin-top: 10px">
  <el-table-column label="标准集" prop="sortName"></el-table-column>
</el-table>

重点（js 设置部分）

//为表格添加事件

let isScroll = true;
nextTick(() => {
  let div: HTMLElement | null = document.querySelector(".el-table");
  console.log("div", div);

  if (div) {
    div.style.height = "330px";
    div.addEventListener("mouseenter", function() {
      isScroll = false;
    });
    div.addEventListener("mouseleave", function() {
      isScroll = true;
    });
    let t = document.querySelector(".el-table__body") as HTMLElement;
    if (t) {
      setInterval(() => {
        if (isScroll) {
          var data = waitApproData.value[0];
          setTimeout(() => {
            waitApproData.value.push(data);
            t.style.transition = "all .5s";
            t.style.marginTop = "-41px";
          }, 500);
          setTimeout(() => {
            waitApproData.value.splice(0, 1);
            t.style.transition = "all 0s ease 0s";
            t.style.marginTop = "0";
          }, 1000);
        }
      }, 2500);
    }
  }
});

设置 margin-top 变化是为了每条数据都产生一次位移效果，模拟向上滑动效果，如果只设置一次就只会第一条数据产生位移效果

涉及到的知识点

margin 设置为负值

  1. margin-left,margin-right:
  • 没设置宽度时，宽度增加
  • 有设置宽度时，产生位移效果
  1. margin-top:
  • 不管是否设置高度，都不会增加高度，而是会产生向上的位移
  1. margin-bottom:
  • 不会位移，高度减少，使该元素的后一个元素产生位移效果

css 属性 style.transition

  • transition 设置过渡效果

参考

表格改成marginlistyleJavaScript

有关表格改成轮播表格效果的更多相关文章

  1. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  2. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  3. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  4. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  5. ruby - 如何以表格格式快速打印 Ruby 哈希值？ - 2

    有没有办法快速将表格格式的ruby​​哈希打印到文件中？如:keyAkeyBkeyC...1232343451253474456...其中散列的值是不同大小的数组。还是使用双循环是唯一的方法？谢谢 最佳答案 试试我写的这个gem(在表中打印散列、ruby对象、ActiveRecord对象):http://github.com/arches/table_print 关于ruby-如何以表格格式快速打印Ruby哈希值？，我们在StackOverflow上找到一个类似的问题：

  6. ruby-on-rails - 为什么我不能在 Rails 的表格中创建一个数组作为列？ - 2

    为什么我不能这样做:classCreateModels是否有其他方法可以使数组(“apples”)成为Fruit类实例的属性？ 最佳答案 在Rails4中并使用PostgreSQL，您实际上可以在数据库中使用数组类型:迁移:classCreateSomething 关于ruby-on-rails-为什么我不能在Rails的表格中创建一个数组作为列？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/qu

  7. ruby - 在不同的文件中设置断点没有效果 - 2

    ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如，考虑这两个文件，foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在，当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时，我收到消息Setbreakpoint1atfoo.rb:4，但是当我cont时，程序执行到最后，调试器永远不会停止。但是，如果我在main.rb中的一行上打断，例如b./main.rb:3，或者一个方法，

  8. ruby-on-rails - Ruby表达式 '-'后留空格的效果 - 2

    今天我在我的Rails控制台中尝试了一些东西，这发生了，2.0.0p247:009>Date.today-29.days=>Fri,07Feb20142.0.0p247:010>Date.today-29.days=>Thu,09Jan2014我很困惑。我可以看到我缺少一些基本的东西。但这让我印象深刻!谁能解释为什么会这样？ 最佳答案 实际发生的是这样的:Date.today(-29.days)#=>Fri,07Feb2014today有一个名为start的可选参数，默认为Date::ITALY。Anoptionalargument

  9. ruby-on-rails - Rails - 如何选择表格中的最后一个日期？ - 2

    如何在列名为Lars的表中选择最后一个日期。我试过这个::dato,AND:name=>:name",:date=>Date.last,:name=>"Lars")%>我试过这个:输出:[#]我只需要一个日期时间格式，例如:2011-02-1523:53:28我该怎么做？ 最佳答案 您必须按日期排序并选择一条记录:您也可以通过限制为单个记录来实现此目的:Reklamer.where(name:'Lars').order('datoDESC').limit(1)如果您只想要最后一个条目的最后日期，您可以这样做:Reklamer.whe

  10. Unity 血条及“掉血”缓冲效果 - 2

     视频教程：https://www.bilibili.com/video/BV1WJ411778C/?spm_id_from=333.999.0.0&vd_source=4a4c35da6aef7094d5990c213c39aa09使用素材（推荐使用GitZipforgithub下载）：https://github.com/zheyuanzhou/Youtube-Unity-Tutorial/tree/master/EP45_Health%20Bar/Sprites效果如下图所示：首先在场景中创建一个新的Canvas，并命名为HeathBar，并创建三个Image作为前者的子物体，分别命名为

随机推荐