[發明專利]適用于左右雙屏的表單頁面自適配展示方法、裝置、計算機設備及計算機可讀存儲介質

在審

• 申請號: 202310481320.2
• 申請日: 2023-04-28
• 公開（公告）號: CN116578219A
• 公開（公告）日: 2023-08-11
• 發明（設計）人: 劉欣毅;韓云歡
• 申請（專利權）人: 北京洞悉網絡有限公司
• 主分類號: G06F3/0482
• 分類號: G06F3/0482;G06F3/04842;G06F3/04847;G06F9/451;G06F3/14
• 代理公司: 成都頂峰專利事務所(普通合伙) 51224
• 代理人: 曹源

1.一種適用于左右雙屏的表單頁面自適配展示方法，其特征在于，包括：

實時監聽在左右雙屏中的表單展示屏是否觸發屏幕尺寸變化事件，其中，所述表單展示屏是指用于展示表單頁面的屏幕；

在確定在左右雙屏中的表單展示屏觸發屏幕尺寸變化事件時，獲取所述表單展示屏的當前屏幕寬度；

根據所述當前屏幕寬度，確定當前的且所述表單頁面的內容區域寬度；

根據所述內容區域寬度，確定當前的且在所述表單展示屏中的單行表單元素可展示數目以及單個表單元素可展示寬度；

根據所述表單頁面的表單元素總數與所述單行可展示表單元素數目的比較結果，判斷所述表單頁面的所有表單元素是否需要換行展示；

若需要，則根據所述單個表單元素可展示寬度，使用彈性盒display:flex布局模式的伸縮換行flex-wrap屬性在所述表單展示屏中換行展示所述所有表單元素。

2.根據權利要求1所述的表單頁面自適配展示方法，其特征在于，實時監聽在左右雙屏中的表單展示屏是否觸發屏幕尺寸變化事件，包括：

基于window.matchMedia()函數，實時監聽在左右雙屏中的表單展示屏是否觸發屏幕尺寸變化事件，其中，所述表單展示屏是指用于展示表單頁面的屏幕。

3.根據權利要求1所述的表單頁面自適配展示方法，其特征在于，獲取所述表單展示屏的當前屏幕寬度，包括：

基于document.body.clientWidth命令檢測得到所述表單展示屏的當前屏幕寬度。

4.根據權利要求1所述的表單頁面自適配展示方法，其特征在于，根據所述當前屏幕寬度，確定當前的且所述表單頁面的內容區域寬度，包括：

判斷所述表單頁面是否具有左側邊欄；

若是，則確定當前的且所述表單頁面的內容區域寬度等于所述當前屏幕寬度減去所述左側邊欄的固定寬度；

若否，則確定當前的且所述表單頁面的內容區域寬度等于所述當前屏幕寬度。

5.根據權利要求1所述的表單頁面自適配展示方法，其特征在于，根據所述內容區域寬度，確定當前的且在所述表單展示屏中的單行表單元素可展示數目以及單個表單元素可展示寬度，包括：

當所述內容區域寬度處于預設寬度區間內時，確定當前的且在所述表單展示屏中的單行表單元素可展示數目等于與所述預設寬度區間對應的預設數目，以及確定當前的且在所述表單展示屏中的單個表單元素可展示寬度等于所述內容區域寬度除以該預設數目，其中，所述預設寬度區間包括第一寬度區間、第二寬度區間或第三寬度區間，所述第一寬度區間基于第一屏幕類型確定，所述第二寬度區間基于第二屏幕類型確定，所述第三寬度區間基于第三屏幕類型確定，所述第一屏幕類型的尺寸小于所述第二屏幕類型的尺寸，所述第二屏幕類型的尺寸小于所述第三屏幕類型的尺寸。

6.根據權利要求1所述的表單頁面自適配展示方法，其特征在于，根據所述內容區域寬度，確定當前的且在所述表單展示屏中的單行表單元素可展示數目以及單個表單元素可展示寬度，包括：

獲取用戶自定義的單行表單元素可展示數目N_uer；

根據所述內容區域寬度，按照如下公式計算得到單行表單元素最多可展示數目N_max：

式中，CW表示所述內容區域寬度，cw_min表示單個表單元素的最窄可展示寬度，floor()表示向下取整函數；

判斷所述單行表單元素最多可展示數目N_max是否大于等于N_uer；

若是，則確定當前的且在所述表單展示屏中的單行表單元素可展示數目等于N_uer，以及確定當前的且在所述表單展示屏中的單個表單元素可展示寬度等于所述內容區域寬度除以N_uer。