datav輪播表使用事例

官方事例地址：

http://datav.jiaminghi.com/guide/scrollBoard.html

 

安裝：

npm install @jiaminghi/data-view

　　

 

局部引入：

import Vue from 'vue'
import { scrollBoard } from '@jiaminghi/data-view'

　　

 

事例dom：

<dv-scroll-board
        :rowNum=12
        :config="configdisplacementofDam"
        style="width:100%;height:100%;"/>

　　

 

數據：

// 大壩位移相關參數
headerdisplacementofDam: ['監測點', '橫偏(X)', '縱偏(Y)', '橫偏(X)', '縱偏(Y)'],
datadisplacementofDam: [
  ['<span class="span-rw">石馬1</span>', '6.36', '6.36', '6.36', '6.36'],
  ['石馬2', '6.36', '6.36', '6.36', '6.36'],
  ['石馬3', '<span>6.36<i class="icon icon-shang"></i></span>', '6.36', '6.36', '6.36'],
  ['石馬4', '6.36', '6.36', '6.36', '6.36'],
  ['石馬5', '6.36', '6.36', '6.36', '6.36'],
  ['石馬6', '6.36', '6.36', '6.36', '6.36'],
  ['石馬7', '6.36', '6.36', '6.36', '6.36'],
  ['石馬8', '6.36', '6.36', '6.36', '6.36'],
  ['石馬9', '6.36', '6.36', '6.36', '6.36'],
  ['石馬10', '6.36', '6.36', '6.36', '6.36'],
  ['石馬11', '6.36', '6.36', '6.36', '6.36'],
  ['石馬12', '6.36', '6.36', '6.36', '6.36']
],
configdisplacementofDam: {}

　　

 

調用方式：

// 生命周期 - 掛載完成（可以訪問DOM元素）
mounted () {
  this.configdisplacementofDam = {
    data: this.datadisplacementofDam, // 表數據
    header: this.headerdisplacementofDam, // 表頭數據
    rowNum: 6, // 表行數
    headerBGC: '#fff', // 表頭背景色
    oddRowBGC: '#fff', // 奇數行背景色
    evenRowBGC: '#fff', // 偶數行背景色
    waitTime: 2000, // 輪播時間間隔(ms)
    align: 'center'
  }
},

　　

設置css樣式：

.l-content {
          .dv-scroll-board{
            color:#3c3f52;
            .header{
              font-size: 1em;
              color: #91a0b9;
              text-align: center;
              white-space: nowrap;
            }
            .rows{
              .row-item{
                text-align: center;

                .ceil{
                  color:#3c3f52;
                  font-size: 1em;
                  i{
                    font-size: 0.5em;
                    color: #3bc080;
                    /*position: relative;
                    left: 5px;
                    top:10px;*/
                  }
                }
                .ceil:nth-child(1){
                  color: #7cb9ff;
                  font-size: 1.1em;
                  width: 25%;
                }
              }
            }
          }
        }

　　

 

展示效果：