vue文字间歇无缝向上逐个滚动

刺骨的言语ヽ痛彻心扉 2022-12-24 01:57 392阅读 0赞

animateUp = false
      
      listData = [
        {
          name:'120件/行政案件',
          type:0,
        },
        {
          name:'150件/民事案件',
          type:1,
        },
        {
          name:'110件/刑事案件',
          type:2,
        },
        {
          name:'100件/行政案件',
          type:2,
        },
        {
          name:'100件/行政案件',
          type:0,
        },
        {
          name:'100件/行政案件',
          type:1,
        },
        {
          name:'100件/行政案件',
          type:0,
        },
      ] 
      timer = null
      mounted() {
        this.timer = setInterval(this.scrollAnimate, 2000);
      }
      scrollAnimate() {
          this.animateUp = true
          setTimeout(() => {
            this.listData.push(this.listData[0])
            this.listData.shift()
            this.animateUp = false
          }, 500)
        }
      destroyed() {
         clearInterval(this.timer)
      }

scss     此 css 为三条滚动 修改条数 自行修改 .marquee-wrap 高度

.marquee-wrap  {
          height: 120px;
          margin: 0;
          overflow: hidden;
          .marquee-list {
            margin: 0; padding: 0;
            li {
              padding-left: 23px;
              box-sizing: border-box;
              width: 100%;
              height: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              list-style: none;
              line-height: 40px;
              text-align: center;
              color: #fff;
              font-size: 14px;
              font-weight: 400;
            }
          }
          .animate-up {
            transition: all 0.5s ease-in-out;
            transform: translateY(-40px);
          }
        }