本發(fā)明涉及計(jì)算機(jī)及其軟件技術(shù)領(lǐng)域，特別涉及一種頁(yè)面的顯示方法和裝置。

背景技術(shù)：

在手機(jī)瀏覽器中訪問(wèn)網(wǎng)頁(yè)經(jīng)常碰到彈出遮蓋層，對(duì)遮蓋層內(nèi)部實(shí)現(xiàn)一些操作時(shí)(例如，上下滑動(dòng))，由于javascript中的事件冒泡的機(jī)制，當(dāng)遮蓋層內(nèi)部滑動(dòng)到頂部或者底部的時(shí)候，會(huì)觸發(fā)遮蓋層父容器(html層)的scroll事件，導(dǎo)致遮蓋層下面的頁(yè)面出現(xiàn)滑動(dòng)的現(xiàn)象，從而影響了用戶的瀏覽體驗(yàn)。容器為用于顯示頁(yè)面時(shí)的區(qū)域，可對(duì)區(qū)域進(jìn)行寬度和高度進(jìn)行設(shè)置。

現(xiàn)有的解決遮蓋層下面的下面出現(xiàn)滑動(dòng)問(wèn)題的方案是：在彈出遮蓋層之后，首先利用JavaScript技術(shù)獲取客戶端的屏幕高度，動(dòng)態(tài)修改遮蓋層的底下出現(xiàn)滾動(dòng)條的一層(比如大部分是html節(jié)點(diǎn)這一層的高度)，使其不能滾動(dòng)；然后當(dāng)遮蓋層消失，恢復(fù)剛剛被限制高度的那一層，并動(dòng)態(tài)設(shè)置該層scrollTop的值回到之前滾到的位置。

上述這種技術(shù)方案在限制了父容器的高度后，父容器的滾動(dòng)條會(huì)自動(dòng)消失，然而頁(yè)面會(huì)回到滾動(dòng)層初始化的狀態(tài)，頁(yè)面都沒(méi)有一點(diǎn)兒滾動(dòng)，而隱藏彈出層的時(shí)候，需要將頁(yè)面設(shè)置到之前滾動(dòng)的狀態(tài)，這樣整個(gè)頁(yè)面交互會(huì)出現(xiàn)一閃，頁(yè)面跳動(dòng)的現(xiàn)象，影響用戶體驗(yàn)；因此現(xiàn)有技術(shù)并不是從根本阻止事件的穿透，還是會(huì)觸發(fā)被遮蓋層的touch事件，只是設(shè)置了一個(gè)固定的屏高，讓其不能進(jìn)行滾動(dòng)。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明提供一種頁(yè)面的顯示方法和裝置，對(duì)于在移動(dòng)終端瀏覽器中操作多層樣式結(jié)構(gòu)的場(chǎng)景，能夠避免對(duì)最上層頁(yè)面進(jìn)行操作時(shí)候，操作到被遮蓋層的內(nèi)容的問(wèn)題，從而在一定程度上提高了用戶的瀏覽體驗(yàn)。

為實(shí)現(xiàn)上述目的，根據(jù)本發(fā)明的一個(gè)方面，提供了一種頁(yè)面的顯示方法。

本發(fā)明的頁(yè)面的顯示方法包括：將當(dāng)前顯示頁(yè)面位置的Left屬性的值設(shè)置為第一預(yù)設(shè)值，并根據(jù)移動(dòng)終端的屏幕高度設(shè)置當(dāng)前顯示頁(yè)面的高度值以得到變更頁(yè)面；設(shè)置遮蓋層的寬度為所述當(dāng)前顯示頁(yè)面的100％、遮蓋層的Left屬性的值為0；以及設(shè)置彈出層的寬度為第二預(yù)設(shè)值；同時(shí)顯示所述變更頁(yè)面、遮蓋層、以及彈出層。

可選地，所述設(shè)置遮蓋層的寬度為所述當(dāng)前顯示頁(yè)面的100％、遮蓋層的Left屬性的值為0的步驟之后還包括：在所述遮蓋層注冊(cè)點(diǎn)擊事件。

可選地，所述同時(shí)顯示所述變更頁(yè)面、遮蓋層、以及彈出層的步驟之后還包括：在發(fā)生所述點(diǎn)擊事件后關(guān)閉遮蓋層和彈出層，并將所述變更頁(yè)面的left屬性的值設(shè)置為0以恢復(fù)所述當(dāng)前顯示頁(yè)面。

可選地，其特征在于，所述第一預(yù)設(shè)值為第二預(yù)設(shè)值的負(fù)數(shù)。

根據(jù)本發(fā)明的另一個(gè)方面，提供了一種頁(yè)面的顯示裝置。

本發(fā)明的頁(yè)面的顯示裝置，包括：第一設(shè)置模塊，用于將當(dāng)前顯示頁(yè)面位置的Left屬性的值設(shè)置為第一預(yù)設(shè)值，并根據(jù)移動(dòng)終端的屏幕高度設(shè)置當(dāng)前顯示頁(yè)面的高度值以得到變更頁(yè)面；第二設(shè)置模塊，用于設(shè)置遮蓋層的寬度為所述當(dāng)前顯示頁(yè)面的100％、遮蓋層的Left屬性的值為0；以及設(shè)置彈出層的寬度為第二預(yù)設(shè)值；顯示模塊，用于同時(shí)顯示所述變更頁(yè)面、遮蓋層、以及彈出層。

可選地，還包括注冊(cè)模塊，用于在所述遮蓋層注冊(cè)點(diǎn)擊事件。

可選地，還包括第三設(shè)置模塊，用于在發(fā)生所述點(diǎn)擊事件后關(guān)閉遮蓋層和彈出層，并將所述變更頁(yè)面的left屬性的值設(shè)置為0以恢復(fù)所述當(dāng)前顯示頁(yè)面。

可選地，所述第一預(yù)設(shè)值為第二預(yù)設(shè)值的負(fù)數(shù)。

根據(jù)本發(fā)明的技術(shù)方案，對(duì)于在移動(dòng)終端瀏覽器中操作多層樣式結(jié)構(gòu)的場(chǎng)景，能夠避免對(duì)最上層頁(yè)面進(jìn)行操作時(shí)候，操作到被遮蓋層的內(nèi)容的問(wèn)題，從而在一定程度上提高了用戶的瀏覽體驗(yàn)。

附圖說(shuō)明

附圖用于更好地理解本發(fā)明，不構(gòu)成對(duì)本發(fā)明的不當(dāng)限定。其中：

圖1是根據(jù)本發(fā)明實(shí)施例的一種頁(yè)面的顯示方法的示意圖；

圖2是根據(jù)本發(fā)明實(shí)施例的一種頁(yè)面的顯示裝置的示意圖。

具體實(shí)施方式

以下結(jié)合附圖對(duì)本發(fā)明的示范性實(shí)施例做出說(shuō)明，其中包括本發(fā)明實(shí)施例的各種細(xì)節(jié)以助于理解，應(yīng)當(dāng)將它們認(rèn)為僅僅是示范性的。因此，本領(lǐng)域普通技術(shù)人員應(yīng)當(dāng)認(rèn)識(shí)到，可以對(duì)這里描述的實(shí)施例做出各種改變和修改，而不會(huì)背離本發(fā)明的范圍和精神。同樣，為了清楚和簡(jiǎn)明，以下的描述中省略了對(duì)公知功能和結(jié)構(gòu)的描述。

圖1是根據(jù)本發(fā)明實(shí)施例的一種頁(yè)面的顯示方法的示意圖。如圖1所示，本發(fā)明實(shí)施例的頁(yè)面的顯示方法主要包括如下的步驟S10至S12。

步驟S10：將當(dāng)前顯示頁(yè)面位置的Left屬性的值設(shè)置為第一預(yù)設(shè)值，并根據(jù)移動(dòng)終端的屏幕高度設(shè)置當(dāng)前顯示頁(yè)面的高度值以得到變更頁(yè)面。在移動(dòng)終端中進(jìn)行頁(yè)面顯示時(shí)，通常以移動(dòng)終端的屏幕寬度作為顯示頁(yè)面容器的寬度值，因而在該步驟中，將當(dāng)前顯示的頁(yè)面位置left屬性值設(shè)置為第一預(yù)設(shè)值(比如-90％)，此處的left屬性值用于設(shè)置當(dāng)前顯示頁(yè)面距屏幕的左邊距，即以當(dāng)前屏幕作為參照物當(dāng)前顯示頁(yè)面進(jìn)行水平左移90％的寬度；然后再將前顯示頁(yè)面的高度設(shè)置為移動(dòng)終端的屏幕高度，從而控制整個(gè)頁(yè)面沒(méi)有滾動(dòng)；在該步驟中，所提到的第一預(yù)設(shè)值可根據(jù)彈出層內(nèi)容的多少進(jìn)行設(shè)置，如果彈出層需要顯示內(nèi)容比較多，那么所設(shè)的第一預(yù)設(shè)值就大一些；如果彈出層顯示內(nèi)容比較少，那么所設(shè)的第一預(yù)設(shè)值就小些，因此當(dāng)彈出層的內(nèi)容比較少時(shí)，第一預(yù)設(shè)值也可以設(shè)置為-80％、-70％、或-50％等。

步驟S11：設(shè)置遮蓋層的寬度為所述當(dāng)前顯示頁(yè)面的100％、遮蓋層的Left屬性的值為0；以及設(shè)置彈出層的寬度為第二預(yù)設(shè)值。在該步驟中，設(shè)置遮蓋層的寬度為100％，left的值為0；其中，所設(shè)遮蓋層的寬度以步驟S10中提到的當(dāng)前顯示頁(yè)面作為參照，寬度設(shè)置為100％，即正好遮住當(dāng)前頁(yè)面的內(nèi)容部分；同時(shí)，left值設(shè)置為0，即將遮蓋層的相對(duì)于當(dāng)前顯示頁(yè)面向左對(duì)齊；以及設(shè)置彈出層的寬度為90％，即移動(dòng)終端的屏幕寬度的90％，用于填充步驟S10中當(dāng)前顯示頁(yè)面在水平左移后留出的90％屏寬區(qū)域；并且所述第二預(yù)設(shè)值隨著第一預(yù)設(shè)值的改變而改變，因而保證整個(gè)彈出過(guò)程正好與移動(dòng)后的頁(yè)面無(wú)縫連接，并且沒(méi)有橫向滾動(dòng)。本發(fā)明實(shí)施例技術(shù)方案中增加了遮蓋層，不僅讓用戶知道下面是有東西，同時(shí)還優(yōu)化了視覺(jué)效果，而且通過(guò)在遮蓋層上注冊(cè)點(diǎn)擊事件，以控制彈出層的隱藏。

步驟S12：同時(shí)顯示所述變更頁(yè)面、遮蓋層、以及彈出層。在步驟S12之后，當(dāng)在遮蓋層發(fā)生所注冊(cè)的點(diǎn)擊事件后，關(guān)閉遮蓋層和彈出層，并將所述變更頁(yè)面的left屬性的值設(shè)置為0以恢復(fù)所述當(dāng)前顯示頁(yè)面。本發(fā)明實(shí)施例技術(shù)方案中，通過(guò)遮蓋層為用戶提供一個(gè)點(diǎn)擊區(qū)域來(lái)使被遮蓋的頁(yè)面恢復(fù)到原來(lái)的位置。

經(jīng)過(guò)以上三個(gè)步驟，將顯示頁(yè)面中產(chǎn)生滾動(dòng)條的區(qū)域，向左移動(dòng)90％的寬度，之后根據(jù)移動(dòng)終端的屏幕高度改變頁(yè)面的高度，去掉了滾動(dòng)條，從而即使去滑動(dòng)遮蓋層，也不能使整個(gè)頁(yè)面滾動(dòng)；同時(shí)將彈出層的面板填充右邊空出來(lái)的90％的寬度，實(shí)現(xiàn)彈出層內(nèi)部的滾動(dòng)，由于已經(jīng)設(shè)置了被遮蓋頁(yè)面的高度，因而在進(jìn)行彈出層內(nèi)部滾動(dòng)的時(shí)候也不會(huì)影響到下一層頁(yè)面的滾動(dòng)。

圖2是根據(jù)本發(fā)明實(shí)施例的一種頁(yè)面的顯示裝置的示意圖。如圖2所示，本發(fā)明實(shí)施例的頁(yè)面的顯示裝置20主要包括第一設(shè)置模塊21、第二設(shè)置模塊22、以及顯示模塊23；第一設(shè)置模塊21用于將當(dāng)前顯示頁(yè)面位置的Left屬性的值設(shè)置為第一預(yù)設(shè)值，并根據(jù)移動(dòng)終端的屏幕高度設(shè)置當(dāng)前顯示頁(yè)面的高度值以得到變更頁(yè)面；第二設(shè)置模塊22用于設(shè)置遮蓋層的寬度為所述當(dāng)前顯示頁(yè)面的100％、遮蓋層的Left屬性的值為0；以及設(shè)置彈出層的寬度為第二預(yù)設(shè)值；顯示模塊23用于同時(shí)顯示所述變更頁(yè)面、遮蓋層、以及彈出層；所述第一預(yù)設(shè)值為第二預(yù)設(shè)值的負(fù)數(shù)。

頁(yè)面的顯示裝置20還可包括注冊(cè)模塊(圖中未示出)，用于在上述遮蓋層注冊(cè)點(diǎn)擊事件。

頁(yè)面的顯示裝置20還可包括第三設(shè)置模塊(圖中未示出)，用于在發(fā)生所述點(diǎn)擊事件后關(guān)閉遮蓋層和彈出層，并將所述變更頁(yè)面的left屬性的值設(shè)置為0以恢復(fù)所述當(dāng)前顯示頁(yè)面。

根據(jù)本發(fā)明實(shí)施例的技術(shù)方案，對(duì)于在移動(dòng)終端瀏覽器中操作多層樣式結(jié)構(gòu)的場(chǎng)景，能夠避免對(duì)最上層頁(yè)面進(jìn)行操作時(shí)候，操作到被遮蓋層的內(nèi)容的問(wèn)題，從而在一定程度上提高了用戶的瀏覽體驗(yàn)。

上述具體實(shí)施方式，并不構(gòu)成對(duì)本發(fā)明保護(hù)范圍的限制。本領(lǐng)域技術(shù)人員應(yīng)該明白的是，取決于設(shè)計(jì)要求和其他因素，可以發(fā)生各種各樣的修改、組合、子組合和替代。任何在本發(fā)明的精神和原則之內(nèi)所作的修改、等同替換和改進(jìn)等，均應(yīng)包含在本發(fā)明保護(hù)范圍之內(nèi)。