成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

AlphaWallet / 987人閱讀

摘要：實(shí)現(xiàn)表頭固定，垂直滾動(dòng)準(zhǔn)備工作獲取頁(yè)面可是區(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)備工作：

獲取頁(yè)面可是區(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的單元格，使表頭對(duì)齊





    
    
    
    兩個(gè)table
    
    
    



    

        

            
                

                    部門(mén)
                    用戶名稱
                    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)容
第二種方法：通過(guò)JS實(shí)現(xiàn)

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



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

  
    

      

        
          

            
              
部門(mén)

            		
            
              
用戶名稱

            		
            
              
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)容
第三種方法 通過(guò)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：無(wú)問(wèn)題；安卓：橫向滾動(dòng)表頭抖動(dòng)
JS => ios：無(wú)問(wèn)題；安卓：垂直滾動(dòng)表頭抖動(dòng)
兩個(gè)table=> ios：無(wú)法橫向滾動(dòng)；安卓：無(wú)問(wèn)題

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114711.html

相關(guān)文章

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

    摘要：實(shí)現(xiàn)表頭固定，垂直滾動(dòng)準(zhǔn)備工作獲取頁(yè)面可是區(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)備工作： 獲取頁(yè)面可是區(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)備工作獲取頁(yè)面可是區(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)備工作： 獲取頁(yè)面可是區(qū)域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

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

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

    摘要：固定的表格頭部與第一列的寬高行高都是通過(guò)獲取真實(shí)的表格的寬高來(lái)設(shè)定的。通過(guò)展示的表格的上下滾動(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)上找了很久也沒(méi)什么好方法，結(jié)合網(wǎng)上...

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

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

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

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

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

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<