資訊專欄INFORMATION COLUMN
摘要：最近在寫一個(gè)復(fù)雜表頭項(xiàng)目可以上下左右滑動(dòng)表頭和左側(cè)固定的表格。此時(shí)需要獲取設(shè)備的寬度作為橫屏?xí)r的高度。代碼如下獲取設(shè)備信息定義空變量記錄屏幕寬高判斷是否是設(shè)備，則獲取其寬度獲取設(shè)備高度修改之后測(cè)試安卓和下都正常了。
最近在寫一個(gè)復(fù)雜表頭項(xiàng)目可以上下左右滑動(dòng)表頭和左側(cè)固定的表格。
此時(shí)頁面要求是要在橫屏下查看。在IOS系統(tǒng)下上下是不能滑動(dòng)的，查其原因是因?yàn)樵贗OS下頁面雖然已經(jīng)被橫屏了，但是再獲取其（window.screen.availHeight）時(shí)，獲取的仍然是豎屏下的高度值。此時(shí)需要獲取設(shè)備的寬度作為橫屏?xí)r的高度。需要判斷設(shè)備是來自安卓還是IOS系統(tǒng)。再根據(jù)訪問設(shè)備確定獲取設(shè)備的高度還是寬度。代碼如下：
// 獲取設(shè)備信息
var u = navigator.userAgent;
// 定義空變量記錄屏幕寬/高
var winheight;
// 判斷是否是IOS設(shè)備，true:則獲取其寬度 false:獲取設(shè)備高度
if (!!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
winheight = window.screen.availWidth;
} else {
winheight = window.screen.availHeight;
}
修改之后測(cè)試安卓和IOS下都正常了。如有同仁在某些設(shè)備下不兼容，望告知，拜謝！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104150.html
摘要：在做業(yè)務(wù)組件的時(shí)候需要自己自己封裝一個(gè)通用的表格，這個(gè)表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及怎么使用。 在做業(yè)務(wù)組件的時(shí)候需要自己自己封裝一個(gè)通用的表格，這個(gè)表格需要符合我們一切的好的幻想，左右固定，表頭固定，分頁，選擇，一直表格內(nèi)容的行數(shù)限制等等，下面就為大家介紹一下這一款表格組件功能以及...
摘要：項(xiàng)目中遇到的問題，需要表頭固定，給表體設(shè)置滾動(dòng)條，搜了很多種方法，也研究了一下。表頭放在中，表體放在中，給設(shè)置固定高度，加樣式，這樣在數(shù)據(jù)多的時(shí)候會(huì)出現(xiàn)滾動(dòng)條，數(shù)據(jù)少的時(shí)候滾動(dòng)條會(huì)消失。項(xiàng)目中遇到的問題，需要表頭固定，給表體設(shè)置滾動(dòng)條，搜了很多種方法，bootstrap table也研究了一下。 下面是我們使用的方法。 表頭放在div1中，表體放在div2中，給div2設(shè)置固定高度，加樣式o...
摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實(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)上...
摘要：所以對(duì)的寬度做了計(jì)算優(yōu)化，達(dá)到自適應(yīng)內(nèi)容寬度，超出一定寬度會(huì)自動(dòng)換行這樣的目的。從而讓開發(fā)更加專注于業(yè)務(wù)，而不是信息。 前段時(shí)間在研究并實(shí)現(xiàn)了如何實(shí)現(xiàn)表格的固定列（fixed column）功能，這里記錄了思路和細(xì)節(jié)表格控件比較復(fù)雜，應(yīng)用場(chǎng)景也很多，需要各種數(shù)據(jù)展示、統(tǒng)計(jì)、操作等特性 原文有視頻演示哦 showImg(https://segmentfault.com/img/bVbv4...
閱讀 1381·2019-08-30 15:44
閱讀 2147·2019-08-30 13:49
閱讀 1750·2019-08-26 13:54
閱讀 3567·2019-08-26 10:20
閱讀 3430·2019-08-23 17:18
閱讀 3362·2019-08-23 17:05
閱讀 2198·2019-08-23 15:38
閱讀 1086·2019-08-23 14:35
