网站开发分为,深圳电子商务平台设计,龙岩kk网,超好看WordPress前言 最近在做大屏需求的时候#xff0c;遇到一个轮播数据的需求#xff0c;查看datav文档发现确实有这个组件 但这个组件只提供了一次加载轮播的例子#xff0c;虽然提供了轮播加载数据updateRows方法 但是文档并没有触发事件#xff0c;比如轮播完数据触发事件#xf…前言 最近在做大屏需求的时候遇到一个轮播数据的需求查看datav文档发现确实有这个组件 但这个组件只提供了一次加载轮播的例子虽然提供了轮播加载数据updateRows方法 但是文档并没有触发事件比如轮播完数据触发事件加载完数据事件-这些都没有说明 关键时我们要解决谁来判断数据轮播完了来触发这个事件请求接口加载第二页数据
视频 datav-轮播表无缝衔接数据 须知
1.为什么要边滚动边加载数据 直接把后端所有数据请求之后直接轮播-确实比较省事。但是这样做法不符合 先不说浏览器受不受得了就一个真实设备报警可能就有78条数据会越来越多 作为一个合理cv工程师我们还是要避免这种事不到万不得已还是不要这样干
2.直接往config.data里面push数据不就行了-不合理 如果我们直接往config.data里面push数据数据确实进去了但是轮播表的数据没有更新 轮播的还是原来的数据如果我们把config.data重新赋值一遍轮播数据确实改变了 但他有从头开始轮播没有无缝衔接。并且是我们手动按钮触发不符合需求不建议 3.使用定时器计算时间加载数据-推荐 本来想在网上找一下有没有轮播完的事件直接用找了一圈一言难尽自己写了一个 注意一我们不能直接写定时器来写代码逻辑因为修改定时器间隔后定时器不会变 注意二因为默认就显示了五个所以有两种情况第一次第二次....代码有注释 注意三因为我们是用定时器来判断加载数据所以要把鼠标悬停停止播放关掉
代码实现-子父组件形式-可复制-看注释
父组件
templatediv classapp-containerel-card classbox-carddiv classcont-topdiv classcon-title测试el-button clickdoUpdate typesuccess sizemini替换数据滚动列表是否更新数据测试/el-button/div/divdiv classcont-bottomDatavTable refDatavTable //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 langscss 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
templatediv idDatavTabledv-scroll-board:configconfigrefscrollBoardstylewidth: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 langscss scoped
#DatavTable {width: 100%;height: 100%;
}
/style 总结
经过这一趟流程下来相信你也对 datav-实现轮播表使用updateRows方法-无缝衔接加载数据 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 有什么不足的地方请大家指出谢谢 -- 風过无痕
