移动端实现表头固定，tbody滚动，三种方法

twohappy 发布于2019-08-23 17:50 / 2138人阅读

摘要：实现表头固定，垂直滚动准备工作获取页面可是区域高度屏幕旋转触发事件正常方向或者屏幕旋转竖屏屏幕顺时针旋转或者逆时针旋转横屏方法一两个思路第一个放表头，第二个方内容。

实现表头固定，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：无法横向滚动；安卓：无问题

专线服务混合云三种实现方法 js移动端向上滚动刷新数据固定表头 webrtc 移动端实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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