前言
-
最近在做大屏需求的時候，遇到一個輪播數據的需求，查看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方法-無縫銜接加載數據 有了初步的深刻印象，但在實際開發中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！
有什么不足的地方請大家指出謝謝 -- 風過無痕
)
