前言
-
最近在做大屏需求的时候，遇到一个轮播数据的需求，查看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.datavIndex
console.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方法-无缝衔接加载数据 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
有什么不足的地方请大家指出谢谢 -- 風过无痕