多行文字无限滚动，鼠标移入停止，移出继续

项目场景：

提示：这里简述项目相关背景：

在做一些大屏时，会有一些信息，这些信息有时候有点多，但是可展示区域没那么大，这时候就需要做一些文字信息的滚动显示。就像下面那个视频一样：

多行文字滚动

但是有时候信息可能又有些少，不用滚动就可以展示完全，这时候就不需要滚动展示。就像下面那个视频一样：

页面能展示全就不滚动

 

---

原因分析：

提示：这里填写问题的分析：

一般做文字滚动，可以用动画，但是使用动画滚动时候在滚动到最后的时候会有卡顿后才会显示第一条信息，而且比较麻烦，那么不用动画直接用js加css也是可以的。

原理：

1. 将一条数据向上移动 transform: translateY(-3rem);
2. 移动一条数据过度用的时间 transition: all 0.3s ease-in-out;
3. 将向上移动后不再显示的数据放到整个数据的后面
4. 完成第一步后，再删除最前面那一条移动后不再显示的数据

---

解决方案：

提示：这里填写该问题的具体解决方案：

 1：html部分

<div class="textListBox">
    <div 
      v-for="item in sideL.alarmList"
      :class="{'upStyle':textUp}" 
      @mouseenter="Stop()" 
      @mouseleave="Up()"
      class="itemBox" >
      <div style="display:flex;justify-content: space-between;cursor:pointer;">
          <div class="">{{item.label}}</div>
          <div class="">{{item.value}}</div>
      </div>
    </div>
</div>

2：css部分

// 整个可视文本区域的大小
.textListBox{
  height:90px;
  width:180px;
  padding:0px 8px;
  box-sizing:border-box;
  overflow:hidden;
  font-size:14px
}
//单个文本的样式
.itemBox{
  padding:5px;
  box-sizing:border-box;
}
//向上移动
.upStyle{
  transition: all 0.3s ease-in-out;
  transform: translateY(-28px);
}

3：js部分

const sideL: any = reactive({
  nameList:[{...}],//其他数据
  // 警报
  alarmList:[
    {
      icon:"icon-baojing1",
      img:leftTicon1,
      label:"告警总数",
      value:"123",
    },
    {
      icon:"icon-qiwen-gaowen",
      img:leftTicon2,
      label:"高温警告",
      value:"123",
    },
    {
      icon:"icon-elietianqi",
      img:leftTicon3,
      label:"恶劣天气警告",
      value:"123",
    },
    {
      icon:"icon-qiwen-diwen",
      img:leftTicon1,
      label:"低温警告",
      value:"123",
    },
    {
      icon:"icon-alarm",
      img:leftTicon3,
      label:"其它警告",
      value:"123",
    },
    {
      icon:"icon-alarm",
      img:leftTicon3,
      label:"昆虫警报",
      value:"123",
    },
    {
      icon:"icon-alarm",
      img:leftTicon3,
      label:"台风警报",
      value:"123",
    },
  ]
})

onMounted(() => {
  ScrollUp(sideL.alarmList,5);//开启文字滚动少于五个不滚动
});


//销毁时 清除计时器
onBeforeUnmount(() => {
  clearInterval(timerTextUp.value);//滚动计时
});



// 控制动画
const textUp=ref(false)
// 计时器
const timerTextUp=ref<any>();
// arrList 需要滚动的list  minNum低于多少个不滚动
const ScrollUp=(arrList,minNum)=> {
  if(arrList.length>minNum){
    timerTextUp.value = setInterval(() => {
      textUp.value = true// 向上滚动的时候需要添加css3过渡动画
      setTimeout(() => {
        arrList.push(arrList[0])// 将数组的第一个元素添加到数组的
        arrList.shift() // 删除数组的第一个元素
        textUp.value = false
      }, 500)
    }, 1000)
  }else{
    textUp.value = false
  }
}
// 鼠标移上去停止
const Stop=() =>{
  clearInterval(timerTextUp.value)
}
// 鼠标离开继续滚动
const Up=()=> {
  ScrollUp(sideL.alarmList,5)
}