横向走马灯以及纵向走马灯

横向走马灯以及纵向走马灯

1. 横向走马灯

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur mi ac eleifend convallis. Sed tincidunt diam vitae magna tempus, sit amet feugiat urna laoreet. Phasellus faucibus dolor sed arcu tristique, eu commodo mi feugiat."
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      const container = this.$refs.container;
      const content = this.$refs.content;
      const containerWidth = container.offsetWidth;
      const contentWidth = content.offsetWidth;

      // 如果内容宽度超出容器宽度，才执行滚动
      if (contentWidth > containerWidth) {
        let scrollLeft = 0;

        setInterval(() => {
          scrollLeft += 10; // 每秒钟滚动的距离，可以根据需要调整

          // 滚动到最右侧时，重新回到最左侧
          if (scrollLeft >= (contentWidth - containerWidth)) {
            scrollLeft = 0;
          }

          container.scrollLeft = scrollLeft;
        }, 1000); // 每秒执行一次滚动，可以根据需要调整
      }
    }
  }
};
</script>

<style>
.scroll-container {
  width: 300px; /* 设置容器的宽度 */
  overflow-x: hidden; /* 隐藏超出的内容 */
}

.scroll-content {
  display: inline-block; /* 让内容不换行 */
  white-space: nowrap; /* 防止内容换行 */
}

/* 可以根据需要自定义样式 */
</style>

2.纵向走马灯

// A code block
var foo = 'bar';

<template>
  <div>
   <el-table :data="tableData" ref="table" height="300px" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.infinitScroll();
  },
  methods: {
    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(t);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出，继续滚动
 
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每1秒移动20像素)
      let t;
      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        t = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 20;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 1000);
      }
      start();
    },
  },
};
</script>

<style>

</style>