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

前言

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

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

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

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

视频

datav-轮播表无缝衔接数据

须知

1.为什么要边滚动边加载数据

  • 直接把后端所有数据请求之后直接轮播-确实比较省事。但是这样做法不符合

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

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

2.直接往config.data里面push数据不就行了-不合理

  • 如果我们直接往config.data里面push数据，数据确实进去了，但是轮播表的数据没有更新

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

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

3.使用定时器计算时间加载数据-推荐

  • 本来想在网上找一下有没有轮播完的事件直接用，找了一圈一言难尽，自己写了一个

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

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

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

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

父组件
<template><div class="app-container"><el-card class="box-card"><div class="cont-top"><div class="con-title">测试<el-button @click="doUpdate" type="success" size="mini">替换数据滚动列表是否更新数据测试</el-button></div></div><div class="cont-bottom"><DatavTable ref="DatavTable" /></div></el-card></div>
</template>
​
<script>
// datav-轮播表
import DatavTable from './components/DatavTable.vue'
export default {name: 'Purejs',components: {DatavTable},methods: {// datav-轮播表添加数据doUpdate () {this.$refs.DatavTable.ceshi()}}
}
</script>
​
<style lang="scss" scoped>
.app-container {::v-deep .box-card {width: 32%;height: 328px;margin: 0 2% 1% 0;&:nth-child(3n) {margin-right: 0;}
​.el-card__body {height: 100%;padding: 0;display: flex;flex-direction: column;// align-items: center;.cont-top {height: 50px;.con-title {line-height: 50px;padding-left: 10px;font-size: 16px;// font-family: PingFang SC-Bold, PingFang SC;font-weight: 700;border-bottom: 1px solid #f4f4f4;}}.cont-bottom {flex: 1;padding: 10px;}.PieDevicetype {background: rgba(2, 29, 159, 0.7);}}}
}
</style>
​
子组件-DatavTable.vue
<template><div id="DatavTable"><dv-scroll-board:config="config"ref="scrollBoard"style="width:100%;height:100%"/></div>
</template>
​
<script>
export default {name: 'DatavTable',data () {return {// 配置config: {// 标头header: ['列1', '列2', '列3'],// 数据data: [],// 是否开启序号index: true,// 宽度-按照顺序-不写就是平均分配columnWidth: [50],// 居中方式align: ['center', 'center', 'center', 'center'],// 滚动时间-每条waitTime: 3500,// 序号别名indexHeader: '排名'},// 定时器加载数据time: null,// datav数据刷新间隔datavNumber: 5,// datav下标datavIndex: 15,// 追加数据addlist: []，// 禁止鼠标悬浮暂停hoverPause: false}},created () {// 模拟调接口-等待data-html加载完毕-不然取不到数据会报错this.$nextTick(() => {this.doUpdate()})},methods: {// 测试方法-测试直接往config.data添加数据时，轮播表数据是否会刷新ceshi () {this.config.data.push(['行', '行1', '行1列3'],['行', '行2', '行2列3'],['行', '行3', '行3列3'],['行', '行4', '行4列3'],['行', '行5', '行5列3'],['行', '行6', '行6列3'],['行', '行7', '行7列3'],['行', '行8', '行8列3'],['行', '行9', '行9列3'],['行', '行1', '行10列3'])// 解决办法-1// 重新new一个对象-轮播数据确实更新了，// 缺点-没有衔接滚动，又从1开始滚动// this.config = { ...this.config }console.log('this.config.data', this.config.data)},doUpdate () {if (this.addlist.length < 10) {console.log('第一次')// 调用第一次接口赋值数据-模拟this.config.data = [['行1列1', '行1列2', '行1列3'],['行2列1', '行2列2', '行2列3'],['行3列1', '行3列2', '行3列3'],['行4列1', '行4列2', '行4列3'],['行5列1', '行5列2', '行5列3'],['行6列1', '行6列2', '行6列3'],['行7列1', '行7列2', '行7列3'],['行8列1', '行8列2', '行8列3'],['行9列1', '行9列2', '行9列3'],['行10列1', '行10列2', '行10列3']]// 记录数据-this.addlist = [['行1列1', '行1列2', '行1列3'],['行2列1', '行2列2', '行2列3'],['行3列1', '行3列2', '行3列3'],['行4列1', '行4列2', '行4列3'],['行5列1', '行5列2', '行5列3'],['行6列1', '行6列2', '行6列3'],['行7列1', '行7列2', '行7列3'],['行8列1', '行8列2', '行8列3'],['行9列1', '行9列2', '行9列3'],['行10列1', '行10列2', '行10列3']]}//   开始判断加载数据console.log('this.config.data.length', this.config.data.length)console.log('this.config.data', this.config.data)console.log('this.addlist', this.addlist.length)
​// 第二次加载if (this.addlist.length > 10) {console.log('第二次执行')// 刷新时间10次this.datavNumber = 10}
​// 先清空-在触发// 不这样写，修改时间间隔后，定时器时间间隔不会修改clearInterval(this.time)this.time = setInterval(this.datavloaddata, 3500 * this.datavNumber)},// datav-添加数据方法datavloaddata () {// 页码加一console.log('执行调接口-第二次')let a = [['行', '行1', '行1列3'],['行', '行2', '行2列3'],['行', '行3', '行3列3'],['行', '行4', '行4列3'],['行', '行5', '行5列3'],['行', '行6', '行6列3'],['行', '行7', '行7列3'],['行', '行8', '行8列3'],['行', '行9', '行9列3'],['行', '行1', '行10列3']]// 模拟调接口赋值数据-res.data - 轮播数据this.addlist = [...this.addlist, ...a]
​// 数据保存一份-没有什么作用// this.config.data = this.addlist
​// 开始轮播数据下标-建议传// 不传也可以-不会影响太大// 传的话就是添加数据开始每次数据长度-15 因为一屏可以显示5个，// 或者是第一次是5 每次加10 - 比较麻烦let c = this.addlist.length - this.datavIndexconsole.log('this.addlist.length', this.addlist.length)console.log('this.datavIndex', this.datavIndex)console.log('c', c)
​// 解决方法二-使用updateRows（）方法追加数据// 优点-无限追加数据-无缝衔接// 缺点-不能直接使用，需要代码触发（比如定时器）这个方法相当于一个缓存，并不会直接把数据更新到config里面// 就更element-table表格选中道理一样，必须先渲染数据表格，才能通过方法选中（直接写死是选中不了-可能没有标记）// this.$refs['scrollBoard'].updateRows(this.addlist,c)this.$refs['scrollBoard'].updateRows(this.addlist)
​// 配置数据-上面赋值了就会变，不赋值是不会变（因为updateRows（）方法-不会修改config里面数据）console.log('this.config.data', this.config.data)// 执行下一次this.doUpdate()}},beforeDestroy () {// 在页面销毁后，清除计时器clearInterval(this.time)}
}
</script>
​
<style lang="scss" scoped>
#DatavTable {width: 100%;height: 100%;
}
</style>

总结：

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/267477.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

设计模式02创建者模式

设计模式02创建者模式

创建者模式 参考网课:黑马程序员Java设计模式详解 博客笔记 创建型模式的主要关注点是“怎样创建对象&#xff1f;”&#xff0c;它的主要特点是“将对象的创建与使用分离”。 这样可以降低系统的耦合度&#xff0c;使用者不需要关注对象的创建细节。 创建型模式分为&#…
阅读更多...
【分治】循环赛日程表Python实现

【分治】循环赛日程表Python实现

文章目录 [toc]问题描述分治算法示例Python实现 无运动员数量约束循环赛日程表算法示例Python实现 问题描述 设有 n 2 k n 2^{k} n2k个运动员要进行网球循环赛&#xff0c;设计一个满足以下要求的比赛日程表 每个选手必须与其他 n − 1 n - 1 n−1个选手各赛一次每个选手一天…
阅读更多...
域渗透之影子凭证 滥用密钥信任账户映射进行账户接管

域渗透之影子凭证 滥用密钥信任账户映射进行账户接管

关注公众号回复20231110获取最新网络安全以及内网渗透等资料。 什么是 PKINIT&#xff1f; 在 Kerberos 身份验证中&#xff0c;客户端必须在 KDC为其提供票证授予票证 (TGT) 之前执行“预验证”&#xff0c;该票证随后可用于获取服务票证。预认证的原因是&#xff0c;没有它&…
阅读更多...
Linux上进行Nacos安装

Linux上进行Nacos安装

Nacos安装指南 仅供参考&#xff0c;若有错误&#xff0c;欢迎批评指正&#xff01; 后期会继续上传docker安装nacos的过程&#xff01; 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好…
阅读更多...
PP和PVC可以相互粘接吗?

PP和PVC可以相互粘接吗?

PP&#xff08;聚丙烯&#xff09;和PVC&#xff08;聚氯乙烯&#xff09;是两种不同类型的塑料&#xff0c;它们的化学性质和表面特性不同&#xff0c;因此直接的粘接会比较困难。这是因为它们的分子结构和化学成分不太相容&#xff0c;不易产生牢固的粘接。通常情况&#xff…
阅读更多...
电路中各种接地的用途和含义

电路中各种接地的用途和含义

在电路设计中&#xff0c;地这个概念是十分重要的&#xff0c;它是整个电路中的参考地点&#xff0c;同时也是信号回流的路径。 我们经常见到有各种地&#xff0c;比如什么数字地、模拟地、信号地&#xff0c;它们在电路中都有什么含义&#xff1f;都是用在哪里&#xff1f;下面…
阅读更多...
SpringBoot热部署

SpringBoot热部署

SpringBoot热部署 借鉴链接&#x1f517;&#xff1a;SpringBoot中的热部署 添加devtools依赖和pom插件 <!-- devtools 依赖 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId&…
阅读更多...
【算法题】数字字符串组合倒序 (js)

【算法题】数字字符串组合倒序 (js)

解法&#xff1a; const str "I am an 20-years out--standing * -stu- dent";function solution(str) {const arr str.split(" ");const newArr arr.map((str) > {if (/[a-zA-Z0-9-]/.test(str)) {if (/-{2}/g.test(str)) {return str.replace(/-…
阅读更多...
iOS 定位问题解决方法整理

iOS 定位问题解决方法整理

文章目录 一、Assertion failure in -[CLLocationManager setAllowsBackgroundLocationUpdates:] 一、Assertion failure in -[CLLocationManager setAllowsBackgroundLocationUpdates:] 后台定位权限没有开启 错误描述&#xff1a; 错误原因&#xff1a; 定位管理中设置了后…
阅读更多...
SQL 优化

SQL 优化

SQL 优化经历&#xff1a;从 30248.271s 到 0.001s 场景 用的数据库是mysql5.6&#xff0c;下面简单的介绍下场景。 课程表 create table Course( c_id int PRIMARY KEY, name varchar(10) ) 数据100条。 学生表 create table Student( id int PRIMARY KEY, name varchar(…
阅读更多...
成都工业学院Web技术基础（WEB）实验八：BOM、DOM基本操作

成都工业学院Web技术基础（WEB）实验八：BOM、DOM基本操作

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…
阅读更多...
软件测试：基础概念

软件测试：基础概念

目录 ​编辑 一、前言 二、软件测试的原则和方法论 1.测试的原则 2.测试的方法论 2. 软件测试策略 2.1 单元测试 2.2 集成测试 2.3 系统测试 2.4 用户验收测试 3. 软件测试的最佳实践 3.1 自动化测试 3.2 持续集成 3.3 边界值测试 三、软件测试的技术和实践 1.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023