亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

移動端實(shí)現(xiàn)表頭固定，tbody滾動，三種方法

bluesky / 2887人閱讀

摘要：實(shí)現(xiàn)表頭固定，垂直滾動準(zhǔn)備工作獲取頁面可是區(qū)域高度屏幕旋轉(zhuǎn)觸發(fā)事件正常方向或者屏幕旋轉(zhuǎn)豎屏屏幕順時針旋轉(zhuǎn)或者逆時針旋轉(zhuǎn)橫屏方法一兩個思路第一個放表頭，第二個方內(nèi)容。

實(shí)現(xiàn)表頭固定，tbody垂直滾動
準(zhǔn)備工作：

獲取頁面可是區(qū)域高度

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

2.屏幕旋轉(zhuǎn)觸發(fā)事件

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

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





    
    
    
    兩個table
    
    
    



    

        

            
                

                    部門
                    用戶名稱
                    1月
                    2月
                    3月
                    4月
                    5月
                    6月
                    7月
                    8月
                    9月
                    10月
                    11月
                    12月
                    合計(jì)
                

            
        

        

            
                

                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
                    這是一個表格內(nèi)容
第二種方法：通過JS實(shí)現(xiàn)

思路：監(jiān)聽滾動事件，動態(tài)控制表頭位置



  
    
    
    
    JS 實(shí)現(xiàn)表頭tbody固定滾動
    
    
    
  

  
    

      

        
          

            
              
部門

            		
            
              
用戶名稱

            		
            
              
1月

            		
            
              
2月

            		
            
              
3月

            		
            
              
4月

            		
            
              
5月

            		
            
              
6月

            		
            
              
7月

            		
            
              
8月

            		
            
              
9月

            		
            
              
10月

            		
            
              
11月

            		
            
              
12月

            		
            
              
合計(jì)

            		
          

        
        
          

            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
            這是一個表格內(nèi)容
第三種方法 通過easyui實(shí)現(xiàn)

思路，引用easyui文件并實(shí)現(xiàn)觸加載更多數(shù)據(jù)，合計(jì)行




      
    
    Basic DataGrid - jQuery EasyUI Mobile Demo  
      
      
      
      
     
     
    


        

                

                    
Basic DataGrid

                

            

    
  
          
            
  
                Item ID  
                Product  
                List Price  
                Unit Cost
優(yōu)缺點(diǎn)分析

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/53947.html

相關(guān)文章

  • 移動端實(shí)現(xiàn)表頭固定，tbody滾動，三種方法

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

    AlphaWallet 評論0 收藏0

  • 移動端實(shí)現(xiàn)表頭固定，tbody滾動，三種方法

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

    twohappy 評論0 收藏0

  • vue移動端復(fù)雜表格表頭，固定表頭與固定第一列

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

    sarva 評論0 收藏0

  • 可拖動table表頭的實(shí)現(xiàn)

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

    paulli3 評論0 收藏0

  • 可拖動table表頭的實(shí)現(xiàn)

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

    canopus4u 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<