vue 实现 滚动 dev列表、table列表

效果图

滚动 div 列表

完整的代码

<template>
  <div>
    <!-- 把头部提出来 -->
    <div>
    <ul class="table-list">
      <li>
        <span>工种类别</span>
        <span>年龄</span>
      </li>
    </ul>
    </div>
    
    <div style="overflow-y: hidden;"
         @mouseover="stopScroll" @mouseleave="leaveScroll">
      <ul class="table-list scroll-content" v-if="policyBeingdeclaredList.length>0" :style="top">
        <li v-for="(item,index) in policyBeingdeclaredList" :key="index" :ref="`edzcxmTr${index}`">
          <span>{{ item.name }}</span>
          <span>{{ item.dept_name }}</span>
        </li>
      </ul>
    </div>
    
  </div>
</template>

<script>
var _this
export default {
  props: {
    moveDistance: {//移动距离
      type: Number,
      default: 77
    }
  },
  data() {
    return {
      policyBeingdeclaredList: [
        {name: "电工班1", dept_name: "18%"},
        {name: "电工班2", dept_name: "28%"},
        {name: "电工班3", dept_name: "38%"},
        {name: "电工班4", dept_name: "48%"},
        {name: "电工班5", dept_name: "58%"},
        {name: "电工班6", dept_name: "68%"},
        {name: "电工班7", dept_name: "78%"}
      ],

      top: "top: -0px;",
      activeIndex: 0,
      edzcxmTrHeight: 0,
    };
  },

  methods: {
    //鼠标悬停，停止滚动
    stopScroll() {
      console.log("鼠标悬停，停止滚动");
      clearInterval(this.scrollTime)
    },
    //鼠标移出 滚动条回到顶部,接着滚动
    leaveScroll() {
      this.top = "top: 0px";
      this.activeIndex = 0;
      this.edzcxmTrHeight = 0;
      this.scroll()
    },
    //循环滚动（每1.5秒滚动一次）
    scroll() {
      //定时器
      this.scrollTime = setInterval(function () {
        //此处里面的对象指向必须要用全局定义的_this
        //自定义滚动
        console.log("此时此刻的activeIndexOne为:", _this.activeIndex, _this.policyBeingdeclaredList.length);
        if (_this.activeIndex < _this.policyBeingdeclaredList.length) {
          _this.activeIndex += 1;

          //方式二（计算动态高度）
          let edzcxmTrIndex = _this.activeIndex - 1
          _this.edzcxmTrHeight += _this.$refs[`edzcxmTr` + edzcxmTrIndex][0].offsetHeight;
        } else {
          _this.activeIndex = 0;
          _this.edzcxmTrHeight = 0;
        }
        //重新渲染top的距离
        //方式一（使用固定高度进行移动）
        //_this.top = "top: " + -_this.activeIndex * _this.moveDistance + "px"; //定义移动的单元高度
        //console.log("方式一:移动距离:",_this.top);
        //方式二（使用动态高度进行移动）
        _this.top = "top: " + -_this.edzcxmTrHeight + "px"; //定义移动的单元高度
        console.log("方式二（使用动态高度进行移动）:", _this.top);
      }, 1000)
    },
  },
  computed: {},
  mounted() {
    //等于全局this
    _this = this;
    //在组件的DOM元素挂载到页面之后执行这些操作
    this.$nextTick(() => {
      this.scroll()
    })

  },
  //生命周期 - 销毁之前
  beforeDestroy() {
    //页面销毁的时候清除掉定时任务
    clearInterval(this.scrollTime);
  },
};
</script>
<style lang="scss" scoped>

//重点样式为这个
.scroll-content {
  //自定义滚动 间隔时间和方向
  position: relative;
  transition: top 0.5s; //向上移动
}

/* 模拟表格的样式 */
.table-list {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 30px;
}

.table-list li {
  display: table-row;
}

.table-list li > span {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

/* 表头样式 */
.table-list li:first-child > span {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 奇偶行斑马线效果 */
.table-list li:nth-child(even) {
  background-color: #f9f9f9;
}
</style>

关键点为
一：属性方面

• height属性
• overflow-y属性（auto是显示、hidden是隐藏）
• scroll-content 样式
• :style=“top”
• ref 命名 （其中的edzcxmTr${key}是为了捕获方式二的动态尺寸）

其中的 @mouseover 和 @mouseleave 是用做监控鼠标移动，实现“暂停”需求，看业务需求了

二：获取top方式

上面一共有两种获取top方式
1.在列表的高度统一的情况下，可以直接使用
2.在列表的高度不一样的时候（文字自动换行显示，会导致某一行高度变大），从而就需要使用动态捕获

三：transition(动画过渡) 的设置

transition(动画过渡) 里面的 时间比 定时任务执行的时间不要一致，效果会更好一些
例如 transition 0.5秒 的 时候 定时任务执行 为 1秒 （视觉上面看是一格一格滚动）
例如 transition 2 秒 的 时候 定时任务执行 为 1秒 （视觉上面看是有点卡卡的匀速滚动）

滚动 table 列表

只需要注意一下template的table参数的写法，script部分都一样

表格通过css固定的还是会出现抖动的情况，导致视觉上面有溢出现象，所以我这边把它提出来

<template>
  <div>
    <!--  表格通过css固定还是会出现抖动，导致视觉上面有溢出现象，所以我这边把“头部”提出来-->
<table>
   <thead>
      <tr>
         <th >项目名称</th>
          <th>主管部门</th>
      </tr>
   </thead>
</table>

<div  style="height: calc(100% - 40px);overflow-y: hidden;" @mouseover="stopScroll" @mouseleave="leaveScroll">
 <table class="scroll-content" :style="top">
<!-- <thead> -->
<!--  <tr>-->
<!--   <th style="width: 55%;">项目名称</th>-->
<!--     <th>主管部门</th>-->
<!--  </tr>-->
<!-- </thead>-->
  <tbody>
   <tr v-for="(item, key) in policyBeingdeclaredList " :key="key" :ref="`edzcxmTr${key}`">
    <td>{{ item.name }}</td>
    <td>{{ item.dept_name }}</td>
   </tr>
  </tbody>
 </table>
</div>

  </div>
</template>

<style lang="scss" scoped>

//重点样式为这个
.scroll-content {
  //自定义滚动 间隔时间和方向
  position: relative;
  transition: top 0.5s; //向上移动
}

/* 表格样式 */  
  table {  
    width: 100%;  
    border-collapse: collapse;  
  }  
  
  th, td {  
    padding: 8px;  
    text-align: left;  
    border: 1px solid #ddd;  
  }  
  
  /* 表头样式 */  
  th {  
    background-color: #f2f2f2;  
    font-weight: bold;  
  }  
  
  /* 奇偶行斑马线效果 */  
  tr:nth-child(even) {  
    background-color: #f9f9f9;  
  }  
</style>

参考文章
【1】transition 自动滚动表格(vue)