ElementUI的走馬燈效果應用

  最近做一個大屏顯示，需要循環遍歷統計列表每行的數據，然后用循環到的當前行id獲取其他數據列表，以走馬燈的形式顯示，全程自動切換。即：（1）統計數據，第一行；-> （2）其他數據A； -> （3）其他數據B； ->（4）其他數據C； ->（1）統計數據，第二行；以此類推。本來用的是EasyUI，發現EasyUI上沒有走馬燈，然后就想到了用ElementUI的 Carousel組件。
  以下是定義的四個數據列表的走馬燈；

        <div>
            <el-carousel ref="carousel" trigger="click" arrow="always" height="800px" indicator-position="outside" 
                :initial-index="carouselIndex" :autoplay="false">
             <el-carousel-item>
                    <div id="TaskDataGird" style="background-color:#1e408a;" class="easyui-datagrid" ></div>
            </el-carousel-item>
            <el-carousel-item>
                    <div id="TaskDataGird1" class="easyui-datagrid">
                </div>
            </el-carousel-item>
                 <el-carousel-item>
                    <div id="TaskDataGird2" class="easyui-datagrid">
                </div>
            </el-carousel-item>  
                 <el-carousel-item>
                    <div id="TaskDataGird3" class="easyui-datagrid">
                </div>
            </el-carousel-item>
          </el-carousel>
        </div>

  定義了兩個參數；

            data: {
                carouselIndex: 0,// 滾動的看板索引
                intervalTime: 10, // 滾動間隔時間
            },

  當頁面渲染完成后，加一個定時器控制它的每間隔多長時間滾動顯示；

            created() {
                this.getRollTime();
            },
            mounted() {
                this.LoadDataGird(); // 加載統計數據

                setInterval(this.switchCarousel, this.intervalTime * 1000); // 定時器，默認每10秒切換
            },

  滾動的方法，用this.$refs.carousel.setActiveItem(this.carouselIndex);來設置滾動的索引切換幻燈片。

            methods: {
                // 獲取滾動時間
                getRollTime() {
                    $.get("Ajax/Ajax.ashx?OperateType=GetRollTime",
                        function (data) {
                            var obj = JSON.parse(data);
                            if (obj.ResultCode == "True") {
                                this.intervalTime = obj.obj;
                            }
                        }, 'text');
                },
                // 滾動切換
                switchCarousel() {
                    // 切換走馬燈
                    this.$refs.carousel.setActiveItem(this.carouselIndex);
                    // 根據走馬燈索引加載數據
                    switch (this.carouselIndex) {
                        case 0:
                            $('#TaskDataGird').datagrid("selectRow", statisticsRow);
                            var row = $('#TaskDataGird').datagrid("getSelected");
                            ID = row.ID;
                            // 循環統計數據行
                            statisticsRow++;
                            if (statisticsRow > rowAll - 1) {
                                statisticsRow = 0;
                            }
                            break;
                        case 1:
                            this.LoadDataGird1();
                            break;
                        case 2:
                            this.LoadDataGird2();
                            break;
                        case 3:
                            this.LoadDataGird3();
                            break;
                        default:
                    }
                    this.carouselIndex++;
                    if (this.carouselIndex == 4) {
                        this.carouselIndex = 0;
                    }
                },
            },

  另外為了使走馬燈按鈕清晰一些，我放大了切換按鈕和指示器，加深了一些顏色;

    <style lang="scss" scoped>
        /*指示器*/
        .el-carousel__button {
            width: 60px;
            height: 20px;
            /*background-color: black;*/
        }

        .el-carousel__indicators--outside button {
            background-color: black;
            opacity: .24;
        }
        /*切換按鈕*/
        .el-carousel__arrow {
            width: 60px;
            height: 60px;
            background-color: rgba(31,45,61,.30)
        }
    </style>

  最后的效果；