transition 自动滚动表格(vue)

最新推荐文章于 2025-03-21 14:51:53 发布

逸然健在

最新推荐文章于 2025-03-21 14:51:53 发布

阅读量9.6k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_26991807/article/details/86537146

版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个基于Vue的自动滚动列表实现方案，详细讲解了如何利用transition样式、定时器和数据绑定来创建平滑滚动效果。文章重点介绍了三个关键变量：滚动区域、滚动时间和位移量，并提供了完整的代码示例。

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

自动滚动主要注意三个变量:

1,要显示的滚动区域,

2,滚动时间,

3每次滚动的位移量

滚动效果主要是根据transition样式进行设置: transition: width 2s; 第一个参数是指方向,第二个是移动时长

再通过数据的需求设置每次需要移动的距离,js方法设置即可,可视区域外的元素遮盖(overflow:hidden)即可,代码如下:

<template>
  <div style="height:100%;width:100%">
    <div class="body" :style="view">
      <div class="scroll-content" :style="{top}" >
        <tr v-for="item in dutyRateData">
          <td>{{item.group}}</td>
          <td>{{item.bookNum}}</td>
          <td>{{item.sceneNum}}</td>
          <td>{{item.dutyRate}}</td>
        </tr>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    viewHeight: {//可视窗口
      type: [Number, String],
      default: "200px"
    },
    // animationTime: {//移动间隔
    //   type: [Number, String],
    //   default: "0.825s"
    // },
    // direction:{//移动方向
    //     type:String,
    //     default:top,
    // },
    moveDistance:{//移动距离
        type:Number,
        default:25
    }
  },
  data() {
    return {
      dutyRateData: [
        { group: "电工班1", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班2", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班3", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班4", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班5", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班6", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班7", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班8", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班9", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班10", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班11", bookNum: 3, sceneNum: 0, dutyRate: "88%" }
      ],
      activeIndex: 0,
      view:''
    };
  },
  methods: {

  },
  computed: {
    top() {
      return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
    },
    
  },
  mounted() {
    this.view= {"height":this.viewHeight}
    setInterval(_ => {
      //自定义滚动 出勤率
      if (
        this.activeIndex <
        this.dutyRateData.length /* this.towerListArr.length */
      ) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 1500);

  }
};
</script>
<style lang="scss" scoped>
.scroll-content {
  //自定义滚动 间隔时间和方向
  position: relative;
  transition: top 0.825s; //向上移动
}
.body {
  width: 100%;
  height: 100px;
  overflow-y: hidden;
  //   position: absolute;
}
</style>