排名轮播表

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

<ScrollRankingBoard 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	---	''
sort	自动排序	Boolean	---	true

data 属性

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

TIP

name属性使用dangerouslySetInnerHTML进行渲染，因此你可以使用html标签来定制个性化的name展示效果。