湖南网站优化外包费用,比价网站,兼职制作网站开发,wordpress页面的设置前言 对于大屏需求我们排名数据轮播也是经常需要用到的需求#xff0c;datav也是给我们提供了 不是说我们自己不能写#xff0c;而是提供好的轮子比我们自己 写的#xff0c;更全面#xff0c;更周到#xff0c; 没有特殊需求的话#xff0c;使用datav配置一下完成这个…前言 对于大屏需求我们排名数据轮播也是经常需要用到的需求datav也是给我们提供了 不是说我们自己不能写而是提供好的轮子比我们自己 写的更全面更周到 没有特殊需求的话使用datav配置一下完成这个是真的快处理一下数据就可以了
代码实现-子组件-可复制
templatediv idDatavRankingdv-scroll-ranking-board :configconfig stylewidth: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 segif (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 langscss scoped
#DatavRanking {width: 100%;height: 100%;
}
/style
总结
经过这一趟流程下来相信你也对 datav-轮播排名-对数据进行处理 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 有什么不足的地方请大家指出谢谢 -- 風过无痕
