资讯专栏INFORMATION COLUMN

layUI做固定表头和左侧一列的

haitiancoder / 3189人阅读

摘要:最近在写一个复杂表头项目可以上下左右滑动表头和左侧固定的表格。此时需要获取设备的宽度作为横屏时的高度。代码如下获取设备信息定义空变量记录屏幕宽高判断是否是设备,则获取其宽度获取设备高度修改之后测试安卓和下都正常了。

最近在写一个复杂表头项目可以上下左右滑动表头和左侧固定的表格。
此时页面要求是要在横屏下查看。在IOS系统下上下是不能滑动的,查其原因是因为在IOS下页面虽然已经被横屏了,但是再获取其(window.screen.availHeight)时,获取的仍然是竖屏下的高度值。此时需要获取设备的宽度作为横屏时的高度。需要判断设备是来自安卓还是IOS系统。再根据访问设备确定获取设备的高度还是宽度。代码如下:

        // 获取设备信息
        var u = navigator.userAgent;
        // 定义空变量记录屏幕宽/高
        var winheight;
        // 判断是否是IOS设备,true:则获取其宽度 false:获取设备高度
        if (!!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
            winheight = window.screen.availWidth;
        } else {
            winheight = window.screen.availHeight;
        }

修改之后测试安卓和IOS下都正常了。如有同仁在某些设备下不兼容,望告知,拜谢!

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

转载请注明本文地址:https://www.ucloud.cn/yun/104150.html

相关文章

  • 一个通用的vue的表格组件

    摘要:在做业务组件的时候需要自己自己封装一个通用的表格,这个表格需要符合我们一切的好的幻想,左右固定,表头固定,分页,选择,一直表格内容的行数限制等等,下面就为大家介绍一下这一款表格组件功能以及怎么使用。 在做业务组件的时候需要自己自己封装一个通用的表格,这个表格需要符合我们一切的好的幻想,左右固定,表头固定,分页,选择,一直表格内容的行数限制等等,下面就为大家介绍一下这一款表格组件功能以及...

    caoym 评论0 收藏0
  • 表头固定,表的主体设置滚动条,同时解决错位问题

    摘要:项目中遇到的问题,需要表头固定,给表体设置滚动条,搜了很多种方法,也研究了一下。表头放在中,表体放在中,给设置固定高度,加样式,这样在数据多的时候会出现滚动条,数据少的时候滚动条会消失。项目中遇到的问题,需要表头固定,给表体设置滚动条,搜了很多种方法,bootstrap table也研究了一下。 下面是我们使用的方法。 表头放在div1中,表体放在div2中,给div2设置固定高度,加样式o...

    nanchen2251 评论0 收藏0
  • vue移动端复杂表格表头固定表头固定一列

    摘要:固定的表格头部与第一列的宽高行高都是通过获取真实的表格的宽高来设定的。通过展示的表格的上下滚动从而带动固定在第一列的向上滚动,向左右滚动带动覆盖上表头的的左右滚动。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言 最近做移动端的h5项目,要做一个可配置表头的复杂表格,网上找了很久也没什么好方法,结合网上...

    sarva 评论0 收藏0
  • 如何实现 React Table 固定列、固定表头

    摘要:所以对的宽度做了计算优化,达到自适应内容宽度,超出一定宽度会自动换行这样的目的。从而让开发更加专注于业务,而不是信息。 前段时间在研究并实现了如何实现表格的固定列(fixed column)功能,这里记录了思路和细节表格控件比较复杂,应用场景也很多,需要各种数据展示、统计、操作等特性 原文有视频演示哦 showImg(https://segmentfault.com/img/bVbv4...

    lijy91 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<