資訊專欄INFORMATION COLUMN
摘要：背景做管理平臺的項(xiàng)目用到了，需要通過監(jiān)聽滾動的位置來獲取最新的數(shù)據(jù)，那么怎么樣監(jiān)聽的滾動呢準(zhǔn)備我們默認(rèn)的技術(shù)棧是代碼信息綁定監(jiān)聽事件獲取需要綁定的滾動距離變量是可視區(qū)的高度變量是滾動條的總高度獲取到的不是
背景
做管理平臺的項(xiàng)目,用到了element-ui，需要通過監(jiān)聽el-table滾動的位置來獲取最新的數(shù)據(jù)，那么怎么樣監(jiān)聽el-table的滾動呢？準(zhǔn)備
我們默認(rèn)的技術(shù)棧是 vue+element-ui
template代碼：
綁定監(jiān)聽事件
mounted() {
// 獲取需要綁定的table
this.dom = this.$refs.table.bodyWrapper
this.dom.addEventListener("scroll", () => {
// 滾動距離
let scrollTop = this.dom.scrollTop
// 變量windowHeight是可視區(qū)的高度
let windowHeight = this.dom.clientHeight || this.dom.clientHeight
// 變量scrollHeight是滾動條的總高度
let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
if (scrollTop + windowHeight === scrollHeight) {
// 獲取到的不是全部數(shù)據(jù) 當(dāng)滾動到底部 繼續(xù)獲取新的數(shù)據(jù)
if (!this.allData) this.getMoreLog()
console.log("scrollTop", scrollTop + "windowHeight", windowHeight + "scrollHeight", scrollHeight)
}
})
}
獲取到新的數(shù)據(jù)后，調(diào)整滾動條的位置
getMoreLog() {
...
this.dom.scrollTop = this.dom.scrollTop - 100
...
}
結(jié)語
至此我們已經(jīng)完成了對table的綁定！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102944.html
摘要：懶加載方式常見的有淘寶一屏用元素占據(jù)一定的高度，然后再去拉圖片數(shù)據(jù)。但這種方式還是需要元素占位，淘寶一頁的數(shù)據(jù)量其實(shí)不算大，因?yàn)樗Y(jié)合了分頁。 背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數(shù)據(jù)項(xiàng)目根據(jù)用戶輸入代碼查詢數(shù)據(jù)，用戶的代碼不可控（比如select from db limit 5000），有可能...
摘要：無效方案根據(jù)交易所小時成交量占比和實(shí)時價格加權(quán)計(jì)算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標(biāo)，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...
摘要：無效方案根據(jù)交易所小時成交量占比和實(shí)時價格加權(quán)計(jì)算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標(biāo)，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動固定表頭的...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
閱讀 2804·2021-11-24 09:39
閱讀 2777·2021-09-23 11:45
閱讀 3403·2019-08-30 12:49
閱讀 3352·2019-08-30 11:18
閱讀 1908·2019-08-29 16:42
閱讀 3344·2019-08-29 16:35
閱讀 1321·2019-08-29 11:21
閱讀 1912·2019-08-26 13:49
