[JavaScript知识库]vue element ui实现文字消息滚动循环，轮播图

轮播图

<div class="bs-sysMsg">
  <div class="msg__content">
    <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
      <el-carousel-item v-for="item in systemMsg" :key="item.uuid">
          <a href="javascript:void(0)" class="item">{{item.title}}</a>
      </el-carousel-item>
    </el-carousel>
  </div>
</div>

data () {
    return {
      systemMsg: [
        {uuid:1,title:111111111},
        {uuid:2,title:2222222222},
        {uuid:3,title:333333333},
      ],
    };
  },

轮播图样式

<style lang="scss" scoped>
.bs-sysMsg {
    margin-left: 10%;
    position: relative;
    display: flex;
    width: 80%;
    padding: 5px 5px;
    // border-radius: 2px;
    color: #017dff;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    align-items: center;
    transition: opacity .2s;
}
.bs-sysMsg .msg__content {
    display: table-cell;
    padding: 0 8px;
    width: 100%;
    text-align: center;
}
.bs-sysMsg .msg__content a.item {
    color: #000;
    font-size: 20px;
    opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover{text-decoration: underline;}
</style>