移動端實現表頭固定，tbody滾動，三種方法

twohappy 發布于2019-08-23 17:50 / 2310人閱讀

摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。

實現表頭固定，tbody垂直滾動
準備工作：

獲取頁面可是區域高度

function setIframeHeight() {
    var screenHeight = document.documentElement.clientHeight;
}

2.屏幕旋轉觸發事件

window.addEventListener("resize",()=>{
    //正常方向或者屏幕旋轉180°
    if(window.orientation===180||window.orientation===0){
        console.log("豎屏");
    }
    //屏幕順時針旋轉90°或者逆時針旋轉90°
    if (window.orientation===90||window.orientation===-90) {
        console.log("橫屏");
    }
})

方法一：兩個table

思路：第一個table放表頭，第二個table方內容。循環獲取tbody第一行單元格的寬度，給thead的單元格，使表頭對齊

第二種方法：通過JS實現

思路：監聽滾動事件，動態控制表頭位置



  
    
    
    
    JS 實現表頭tbody固定滾動
    
    
    
  

  
    
      
        
          
            
              部門
            
            
              用戶名稱
            
            
              1月
            
            
              2月
            
            
              3月
            
            
              4月
            
            
              5月
            
            
              6月
            
            
              7月
            
            
              8月
            
            
              9月
            
            
              10月
            
            
              11月
            
            
              12月
            
            
              合計
            
          
        
        
          
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容
            這是一個表格內容

部門	用戶名稱	1月	2月	3月	4月	5月	6月	7月	8月	9月	10月	11月	12月	合計
這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容	這是一個表格內容

第三種方法通過easyui實現

思路，引用easyui文件并實現觸加載更多數據，合計行




      
    
    Basic DataGrid - jQuery EasyUI Mobile Demo  
      
      
      
      
     
     
    


        
                
                    Basic DataGrid
                
            
      
          
              
                Item ID  
                Product  
                List Price  
                Unit Cost

優缺點分析

EasyUI => ios：無問題；安卓：橫向滾動表頭抖動
JS => ios：無問題；安卓：垂直滾動表頭抖動
兩個table=> ios：無法橫向滾動；安卓：無問題

GPU云服務器云服務器三種實現方法 js移動端向上滾動刷新數據固定表頭 webrtc 移動端實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104226.html

移動端實現表頭固定，tbody滾動，三種方法

摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。實現表頭固定，tbody垂直滾動準備工作：獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

AlphaWallet 2019-08-30 11:00 評論0 收藏0
移動端實現表頭固定，tbody滾動，三種方法

摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。實現表頭固定，tbody垂直滾動準備工作：獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

bluesky 2019-08-02 15:10 評論0 收藏0
vue移動端復雜表格表頭，固定表頭與固定第一列

摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實的表格的寬高來設定的。通過展示的表格的上下滾動從而帶動固定在第一列的向上滾動，向左右滾動帶動覆蓋上表頭的的左右滾動。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言最近做移動端的h5項目，要做一個可配置表頭的復雜表格，網上找了很久也沒什么好方法，結合網上...

sarva 2019-08-23 10:26 評論0 收藏0
可拖動table表頭的實現

摘要：前言自己做的項目碰到這樣一個需求，就是對所有的表格添加表頭可以拖動的效果。需要說明的是，表頭固定的那種是需要用兩個去實現，做過的人應該也都明白。拜拜后續補充更改了寬度改變的方式，應該是只改變拖動列后面的列的寬度。前言自己做的項目碰到這樣一個需求，就是對所有的表格添加表頭可以拖動的效果。我一想，這不簡單，分分鐘鐘給你做出來。拿起我的電腦，啪啪啪就敲起來了。showImg(https:...

paulli3 2019-08-26 11:41 評論0 收藏0
可拖動table表頭的實現

摘要：前言自己做的項目碰到這樣一個需求，就是對所有的表格添加表頭可以拖動的效果。需要說明的是，表頭固定的那種是需要用兩個去實現，做過的人應該也都明白。拜拜后續補充更改了寬度改變的方式，應該是只改變拖動列后面的列的寬度。前言自己做的項目碰到這樣一個需求，就是對所有的表格添加表頭可以拖動的效果。我一想，這不簡單，分分鐘鐘給你做出來。拿起我的電腦，啪啪啪就敲起來了。showImg(https:...

canopus4u 2019-08-01 18:34 評論0 收藏0