datav-实现轮播表,使用updateRows方法-无缝衔接加载数据

前言

  • 最近在做大屏需求的时候,遇到一个轮播数据的需求,查看datav文档发现确实有这个组件

  • 但这个组件只提供了一次加载轮播的例子,虽然提供了轮播加载数据updateRows方法

  • 但是文档并没有触发事件,比如轮播完数据触发事件,加载完数据事件-这些都没有说明

  • 关键时我们要解决谁来判断数据轮播完了,来触发这个事件,请求接口,加载第二页数据

视频

datav-轮播表无缝衔接数据

须知

1.为什么要边滚动边加载数据
  • 直接把后端所有数据请求之后直接轮播-确实比较省事。但是这样做法不符合

  • 先不说浏览器受不受得了,就一个真实设备报警可能就有7,8条,数据会越来越多

  • 作为一个合理cv工程师,我们还是要避免这种事,不到万不得已还是不要这样干

2.直接往config.data里面push数据不就行了-不合理
  • 如果我们直接往config.data里面push数据,数据确实进去了,但是轮播表的数据没有更新

  • 轮播的还是原来的数据,如果我们把config.data重新赋值一遍,轮播数据确实改变了

  • 但他有从头开始轮播,没有无缝衔接。并且是我们手动按钮触发,不符合需求,不建议

datav-实现轮播表,使用updateRows方法-无缝衔接加载数据_第1张图片

3.使用定时器计算时间加载数据-推荐
  • 本来想在网上找一下有没有轮播完的事件直接用,找了一圈一言难尽,自己写了一个

  • 注意一:我们不能直接写定时器来写代码逻辑,因为修改定时器间隔后,定时器不会变

  • 注意二:因为默认就显示了五个,所以有两种情况,第一次,第二次....代码有注释

  • 注意三:因为我们是用定时器来判断加载数据,所以要把鼠标悬停停止播放关掉

代码实现-子父组件形式-可复制-看注释

父组件
子组件-DatavTable.vue

总结:

经过这一趟流程下来相信你也对 datav-实现轮播表,使用updateRows方法-无缝衔接加载数据 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

有什么不足的地方请大家指出谢谢 -- 風过无痕

你可能感兴趣的:(Vue-相关技术,vue,性能优化-项目适配问题,前端,DataV,轮播表-无缝衔接加载数据,updateRows)