排名轮播表

排名轮播表同轮播表类似，也可以选择单条轮播或整页轮播。 （React版 (opens new window)）

<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数据

export default {
  data: [
    {
      name: '周口',
      value: 55123
    },
    {
      name: '南阳',
      value: 12022
    },
    {
      name: '西峡',
      value: 78932
    },
    {
      name: '驻马店',
      value: 63411
    },
    {
      name: '新乡',
      value: 44231
    }
  ],
  unit: '单位',
  valueFormatter ({ value }) {
    console.warn(arguments)
    const reverseNumber = (value + '').split('').reverse()
    let valueStr = ''

    while (reverseNumber.length) {
      const seg = reverseNumber.splice(0, 3).join('')
      valueStr += seg
      if (seg.length === 3) valueStr += ','
    }

    return valueStr.split('').reverse().join('')
  }
}

config属性

属性	说明	类型	可选值	默认值
data	表数据	Array<Object>	data属性	[]
rowNum	表行数	Number	---	5
waitTime	轮播时间间隔(ms)	Number	---	2000
carousel	轮播方式	String	'single'|'page'	'single'
unit	数值单位	String	---	''
sort	自动排序	Boolean	---	true
valueFormatter	数值格式化	Function	---	undefined

data属性

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

valueFormatter参数属性

属性	说明	类型	可选值	默认值
name	名称	String	---	---
value	数值	Number	---	---
percent	百分比	Number	---	---
ranking	排名	Number	---	---

TIP

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