vue文字消息輪播列表

參考鏈接：vue實現消息的無縫滾動效果

參考鏈接：vue+Element實現文字列表輪番滾動效果

參考鏈接：如何用vue寫一個文字消息輪播列表

輪播方法

init() {
    this.$nextTick(() = > {
        addEvent(this.$refs.message, 'mouseover', () = > {
            clearInterval(this.interval);
        });
        addEvent(this.$refs.message, 'mouseout', () = > {
            this.move();
        });
    });
}
async getWorkflowSystemMessage() {
    let[err, data] = await this.$to(workflowSystemMessage());
    if (err) {
        return;
    }
    this.workflowSystemMessage = data;
    if (data.length > 8) {
        this.move();
    }
}
move() {
    this.interval = setInterval(() = > {
        if (this.isMove) {
            this.workflowSystemMessage.push(this.workflowSystemMessage.shift());
            this.isMove = false;
        } else {
            this.isMove = true;
        }
    }, 3000);
}

scss樣式

.message-wrap {
  height: 280px;
  overflow: hidden;
  .message {
    padding: 0 20px;
    overflow: hidden;
    &.move {
      animation: move 1s ease-in-out forwards;
    }
    @keyframes move {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-35px);
      }
    }
    .message-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #555d6e;

      .normal {
        color: #a1a1a1;
      }
      .urgent {
        color: #ffbb43;
      }
      .veryUrgent {
        color: #ed7d6a;
      }
      .message-content {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

頁面調用

<div class="message-wrap">
    <div class="message" :class="[isMove ? 'move' : '']">
        <div v-for="(item, i) in workflowSystemMessage" :key="i" class="message-item mb5 lh30 pointer"> 
            <i class="el-icon-warning" :class="getRank(item.rank)"></i>
            <p class="message-content ml5" :title="item.message_content">{{ item.message_content }}</p>
            <p class="ml10">{{ item.create_time.split(' ')[0] }}</p>
        </div>
    </div>
</div>