博客

前言与思路

需求图

需求：针对以上列表进行无线滚动
实现方式：一直滚动、单行单行滚动
实现思路：
1、基于scrollTop+定时器无限滚动的实现
2、基于scrollTo+定时器实现单行一个个滚动
2、基于margin-top+transition通过列表删除首项添加到末尾实现单行滚动

列表循环滚动

1. 思路
   
   

   1、固定高度的父盒子：overflow:hidden
   2、根据内容适应高度的子盒子
   3、每隔0.02秒的频率移动父盒子的scrollTop达到无限滚动的效果
   4、注意：滚动条滚动到最下面无法再次滚动了？
   	  需要在子盒子下面在➕copy子盒子一份，便于继续滚动
   5、滚动的距离大于子盒子本身的高度时，scrollTop置0回到最开始的状态
   

2. 数据➕结构
   
   1、数据

   	const riskList = ref<any>([
        {
        
          grand: '1',
          title: '网站 ICP 备案已过1，需尽快更新网站备案已...',
          time: '2022/04/13',
        },
       ·······
        {
        
          grand: '2',
          title: '网站 ICP 备案已过期，需尽快更新网站备案已...',
          time: '2022/04/13',
        },
      ]);
   

   2、准备 两个子盒子，使用ref用于操作dom

    <div
        ref="scollByFather"
        class="scollBy"
      >
      <!-- 子盒子一 -->
        <div
          ref="scollByChildren"
          class="risktal"
        >
          <div
            v-for="(item,index) in riskList"
            :key="index"
            class="riskItem"
          >
            <div
              class="cricle"
              :class="grandColor[item.grand-1]"
            />
            <div class="name">
              {
        {
         item.title }}
            </div>
            <div class="time">
              {
        {
         item.time }}
            </div>
          </div>
        </div>
        <!-- 子盒子二 -->
        <div
          v-show="otherCopyShow"
          class="risktal"
        >
          <div
            v-for="(item,index) in riskList"
            :key="index"
            class="riskItem"
          >
            <div