vue实现滑动效果

若实现无缝滚动，可参考https://blog.csdn.net/weixin_38345306/article/details/119917668

:class="{anim: animation}"是实现滚动部分的重要代码
template中的内容

<div class="chart-part-2">
            <ul class="ulList" :class="{anim: animation}">
              <li v-for="item in riskList" :key="index">
                <img src="@img/screen2/subtitle_tag.png">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>

script节点中的内容

data(){
animation:false,
riskList:[
   {name:"haha1"},
   {name:"haha2"},
   {name:"haha3"},
   ]
}
created(){
  if(this.riskList.length>1){
        const time=setInterval(this.showMarquee,2000)
      }
}
methods(){
  showMarquee(){
        this.animation=true,
        setTimeout(()=>{
          this.riskList.push(this.riskList[0]);
          this.riskList.shift();
          this.animation=false;
        },340)
        this.$once('hook:beforeDestory',()=>{
          clearInterval(time)
        })
      },
}

style中的内容

.chart-part-2{
      display: flex;
      font-size: 0.8rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      align-items: center;
      //justify-content: center;
      overflow: hidden;/**超出部分隐藏 */
      text-overflow: ellipsis;//单行文本超出部分用省略号
      white-space: nowrap;//强制不换行
      width: 100%;
      img{
        width: 1vh;
        height: 1vh;
        margin: 0 1vh;
      }
    }
.ulList{
  list-style: none;
  line-height: 4vh;
  li{
    width: 90%;
    overflow: hidden;/**超出部分隐藏 */
    white-space: nowrap;//强制不换行
    text-overflow: ellipsis;//文本超出部分用省略号
  }
}
.anim{
  transition: all 0.5s ease-out;//实现滚动效果
  margin-top:-30px  
}