摘要:前言脫離又借鑒,實現類似的固定列和表頭的效果固定,只支持上下滑動,只支持左右滑動,上下左右均可滑動其中下圖中和兩的滑動事件應用了的效果實現布局項目主要方法的
前言
脫離element-ui又借鑒element-ui,實現類似el-table的固定列和表頭的效果
1-1固定,1-2只支持上下滑動,2-1只支持左右滑動,2-2上下、左右均可滑動
其中下圖中1-2和2-1兩part的滑動事件應用了el-table的mousewheel
效果 實現布局:
- {{ date.dateText }}
- 1
- 項目
- {{ item.title }}
主要方法:
handleBodyScroll(event) { this.scrollValue = this.bodyWrapper.scrollLeft this.hasLeft = this.scrollValue > 0 this.$refs.fixedBody.scrollTop = this.bodyWrapper.scrollTop this.$refs.scrollHead.scrollLeft = this.scrollValue }, handleFixedMousewheel(event, data) { const bodyWrapper = this.bodyWrapper if (Math.abs(data.spinY) > 0) { const currentScrollTop = this.bodyWrapper.scrollTop if (data.pixelY < 0 && currentScrollTop !== 0) { event.preventDefault() } if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) { event.preventDefault() } bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5) } else { bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5) } }, handleHeaderMousewheel(event, data) { const { pixelX, pixelY } = data; if (Math.abs(pixelX) >= Math.abs(pixelY)) { event.preventDefault(); this.bodyWrapper.scrollLeft += data.pixelX / 5; } }
element-ui的mousewheel
import normalizeWheel from "normalize-wheel" const isFirefox = typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().indexOf("firefox") > -1; const mousewheel = function(element, callback) { if (element && element.addEventListener) { element.addEventListener(isFirefox ? "DOMMouseScroll" : "mousewheel", function(event) { const normalized = normalizeWheel(event); callback && callback.apply(this, [event, normalized]); }); } }; export default { bind(el, binding) { mousewheel(el, binding.value); } };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54897.html
摘要:前言脫離又借鑒,實現類似的固定列和表頭的效果固定,只支持上下滑動,只支持左右滑動,上下左右均可滑動其中下圖中和兩的滑動事件應用了的效果實現布局項目主要方法的 前言 脫離element-ui又借鑒element-ui,實現類似el-table的固定列和表頭的效果 1-1固定,1-2只支持上下滑動,2-1只支持左右滑動,2-2上下、左右均可滑動 其中下圖中1-2和2-1兩part的滑動事...
摘要:前言脫離又借鑒,實現類似的固定列和表頭的效果固定,只支持上下滑動,只支持左右滑動,上下左右均可滑動其中下圖中和兩的滑動事件應用了的效果實現布局項目主要方法的 前言 脫離element-ui又借鑒element-ui,實現類似el-table的固定列和表頭的效果 1-1固定,1-2只支持上下滑動,2-1只支持左右滑動,2-2上下、左右均可滑動 其中下圖中1-2和2-1兩part的滑動事...
摘要:之前使用寫了一個報表表格,最近突然找到我,說讓我看看能不能將表格的表頭和第一列進行固定,這樣的話方便查看數據,于是,我開始了苦逼的研究起來,畢竟我是個后端啊,對于前端的樣式問題,特別是小功能,煩的一批這里就記錄下我的研究成果一引入和引入 之前使用bootstrap寫了一個報表表格,最近突然找到我,說讓我看看能不能將表格的表頭和第一列進行固定,這樣的話方便查看數據,于是,我開始了苦逼的研...
摘要:實現表頭固定,垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭,第二個方內容。 實現表頭固定,tbody垂直滾動準備工作: 獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...
摘要:實現表頭固定,垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭,第二個方內容。 實現表頭固定,tbody垂直滾動準備工作: 獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...
閱讀 1402·2021-10-11 10:59
閱讀 3103·2019-08-30 15:54
閱讀 2724·2019-08-30 13:19
閱讀 2455·2019-08-30 13:02
閱讀 2371·2019-08-30 10:57
閱讀 3347·2019-08-29 15:40
閱讀 981·2019-08-29 15:39
閱讀 2299·2019-08-29 12:40