# 排名轮播表

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

<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展示效果。