DataX

排名轮播表

排名轮播表同轮播表类似，也可以选择单条轮播或整页轮播。

<dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />
点击复制

单条滚动

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
}

整页滚动

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ],
  carousel: 'page'
}

数值单位

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    }
  ],
  unit: '单位'
}

config属性

属性 说明 类型 可选值 默认值
data 表数据 Array<Object> data属性 []
rowNum 表行数 Number --- 5
waitTime 轮播时间间隔(ms) Number --- 2000
carousel 轮播方式 String 'single'|'page' 'single'
unit 数值单位 String --- ''

data属性

属性 说明 类型 可选值 默认值
name 名称 String --- ---
value 数值 Number --- ---

←