本文主要是介绍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方法-无缝衔接加载数据 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
有什么不足的地方请大家指出谢谢 -- 風过无痕
这篇关于datav-实现轮播表,使用updateRows方法-无缝衔接加载数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!