前言
-
对于大屏需求我们排名数据轮播也是经常需要用到的需求,datav也是给我们提供了
-
不是说我们自己不能写,而是提供好的轮子比我们自己 写的,更全面,更周到,
-
没有特殊需求的话,使用datav配置一下完成这个是真的快,处理一下数据就可以了
代码实现-子组件-可复制
<template>
<div id="DatavRanking">
<dv-scroll-ranking-board :config="config" style="width:100%;height:100%" />
</div>
</template>
<script>
export default {
name: 'DatavRanking',
data () {
return {
// 配置项
config: {
// 数据
data: [
{
name: '周口',
value: 5512
},
{
name: '南阳',
value: 120220
},
{
name: '西峡',
value: 789
},
{
name: '驻马店',
value: 63411
},
{
name: '新乡',
value: 44231
},
{
name: '周口',
value: 5512
},
{
name: '南阳',
value: 1202
},
{
name: '西峡',
value: 789
},
{
name: '驻马店',
value: 6341
},
{
name: '新乡',
value: 44231
}
],
// 显示几行
rowNum: 5,
// 轮播时间
waitTime: 3500,
// 数值单位-写了valueFormatter-这个就不生效
unit: '秦',
// 自动排序
sort: true,
// 数据格式
valueFormatter ({ name, value, percent, ranking }) {
// 打印数值
console.warn(arguments)
// 处理数字分隔
const reverseNumber = (value + '').split('')
let valueStr = ''
while (reverseNumber.length) {
const seg = reverseNumber.splice(0, 3).join('')
valueStr += seg
if (seg.length === 3) valueStr += ','
}
// 清除最后一个逗号问题
if (valueStr[valueStr.length - 1] == ',')
return valueStr.toString().slice(0, -1) + '(次数)'
console.log('valueStr', valueStr)
// 最后一位不是逗号,不用处理
return valueStr + '(次数)'
}
}
}
},
created () {},
methods: {}
}
</script>
<style lang="scss" scoped>
#DatavRanking {
width: 100%;
height: 100%;
}
</style>
总结:
经过这一趟流程下来相信你也对 datav-轮播排名-对数据进行处理 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
有什么不足的地方请大家指出谢谢 -- 風过无痕