成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

AlphaWallet / 1052人閱讀

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

實(shí)現(xiàn)表頭固定，tbody垂直滾動(dòng)
準(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("豎屏");
    }
    //屏幕順時(shí)針旋轉(zhuǎn)90°或者逆時(shí)針旋轉(zhuǎn)90°
    if (window.orientation===90||window.orientation===-90) {
        console.log("橫屏");
    }
})
方法一：兩個(gè)table

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





    
    
    
    兩個(gè)table
    
    
    



    

        

            
                

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

            
        

        

            
                

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

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



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

  
    

      

        
          

            
              
部門

            		
            
              
用戶名稱

            		
            
              
1月

            		
            
              
2月

            		
            
              
3月

            		
            
              
4月

            		
            
              
5月

            		
            
              
6月

            		
            
              
7月

            		
            
              
8月

            		
            
              
9月

            		
            
              
10月

            		
            
              
11月

            		
            
              
12月

            		
            
              
合計(jì)

            		
          

        
        
          

            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(nèi)容
            這是一個(gè)表格內(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：無問題；安卓：橫向滾動(dòng)表頭抖動(dòng)
JS => ios：無問題；安卓：垂直滾動(dòng)表頭抖動(dòng)
兩個(gè)table=> ios：無法橫向滾動(dòng)；安卓：無問題

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114711.html

相關(guān)文章

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

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

    bluesky 評(píng)論0 收藏0

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

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

    twohappy 評(píng)論0 收藏0

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

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

    sarva 評(píng)論0 收藏0

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

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

    paulli3 評(píng)論0 收藏0

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

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

    canopus4u 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<