vue3完成可滚动区域自动滚动展示，原来这么简单！

本章用到的技术栈是：vue3

 核心代码如下：

<script lang="ts">
export default {
  name: 'monitoringList'
};
</script>

<script lang="ts" setup>
import { onMounted,reactive,toRefs,onUnmounted,ref } from 'vue';

const state = reactive({
  title:['测试数据','开发调试','随机值'],
  list1:['测试1','测试2','测试3','测试4','测试5','测试6','测试7'],
  list2:['开发1','开发2','开发3','开发4','开发5','开发6','开发7','开发8','开发9','开发10','开发11'],
  list3:['随机1','随机2','随机3','随机4'],
})
const { title,list1,list2,list3 } = toRefs(state);

// 定义全局定时器
var scrollTime:any = ref();

// 实现滑动函数
function autoScroll(){
  // 监听滑动区域的DOM元素
  const scrollDoms = document.querySelectorAll('.list1');
  // 循环所有DOM元素
  scrollDoms.forEach((scrollDom) => {
    // 判断是否有滚动条
    if(scrollDom.scrollHeight <= scrollDom.clientHeight) return
    // 如果滚动到底部,scrollTop = 0;
    if (scrollDom.scrollTop + scrollDom.clientHeight === scrollDom.scrollHeight) {
      scrollDom.scrollTop = 0;
    } else {
      // 滚动条自增
      scrollDom.scrollTop++; 
    }
  });
}

onMounted(()=>{
  // 初始化定时器
  scrollTime = setInterval(autoScroll,100);
})
onUnmounted(()=>{
  // 销毁定时器
  clearInterval(scrollTime);
})
</script>

<template>
  <div id="centerLeft">
    <div class="content">
      <div class="title-list">
        <div v-for="(item,index) in title" :key="item">
          <span v-if="index==0">{{ item }}({{ list1.length }})</span>
          <span v-if="index==1">{{ item }}({{ list2.length }})</span>
          <span v-if="index==2">{{ item }}({{ list3.length }})</span>
        </div>
      </div>
      <div class="content-list">
        <div class="list1">
          <div v-for="item in list1" :key="item">{{ item }}</div>
        </div>
        <div class="list1">
          <div v-for="item in list2" :key="item">{{ item }}</div>
        </div>
        <div class="list1">
          <div v-for="item in list3" :key="item">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "sass:math";
// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

// px 转为 vw 的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}

#centerLeft{
  width: 100%;
  height: vh(270);
}
.content{
  height: vh(160);
  background: linear-gradient(to left,#06aae3,#06aae3) left top no-repeat,linear-gradient(to bottom,#06aae3,#06aae3) left top no-repeat,linear-gradient(to left,#06aae3,#06aae3) right top no-repeat,linear-gradient(to bottom,#06aae3,#06aae3) right top no-repeat,linear-gradient(to left,#06aae3,#06aae3) left bottom no-repeat,linear-gradient(to bottom,#06aae3,#06aae3) left bottom no-repeat,linear-gradient(to left,#06aae3,#06aae3) right bottom no-repeat,linear-gradient(to left,#06aae3,#06aae3) right bottom no-repeat;
  background-size: vw(1) vh(8),vh(10) vw(1),vw(1) vh(8),vh(10) vw(1),vw(1) vh(8),vh(10) vw(1),vw(1) vh(8),vh(10) vw(1);
  background-color: rgba(143, 201, 249, 0.1);
  .title-list{
    width: 100%;
    height: vh(40);
    border-bottom: 1px solid #6E7079;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: black;
  }
  .content-list{
    width: 100%;
    height: vh(120);
    color: black;
    display: flex;
    .list1{
      width: vw(680);
      height: vh(120);
      overflow-y: scroll;
      text-align: center;
      div{
        height: vh(35);
        line-height: vh(35);
      }
    }
  }
}
::-webkit-scrollbar {
  width: 12px; /* vertical scrollbar width */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 6px; /* 滑块圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 鼠标悬停时滑块颜色 */
}
</style>