一种页面的显示方法和装置制造方法及图纸

本发明专利技术提供一种页面的显示方法和装置，对于在移动终端浏览器中操作多层样式结构的场景，能够避免对最上层页面进行操作时候，操作到被遮盖层的内容的问题，从而在一定程度上提高了用户的浏览体验。本发明专利技术的页面的显示方法包括：将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面；设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值；同时显示所述变更页面、遮盖层、以及弹出层。

【技术实现步骤摘要】

本专利技术涉及计算机及其软件
，特别涉及一种页面的显示方法和装置。
技术介绍
在手机浏览器中访问网页经常碰到弹出遮盖层，对遮盖层内部实现一些操作时(例如，上下滑动)，由于javascript中的事件冒泡的机制，当遮盖层内部滑动到顶部或者底部的时候，会触发遮盖层父容器(html层)的scroll事件，导致遮盖层下面的页面出现滑动的现象，从而影响了用户的浏览体验。容器为用于显示页面时的区域，可对区域进行宽度和高度进行设置。现有的解决遮盖层下面的下面出现滑动问题的方案是：在弹出遮盖层之后，首先利用JavaScript技术获取客户端的屏幕高度，动态修改遮盖层的底下出现滚动条的一层(比如大部分是html节点这一层的高度)，使其不能滚动；然后当遮盖层消失，恢复刚刚被限制高度的那一层，并动态设置该层scrollTop的值回到之前滚到的位置。上述这种技术方案在限制了父容器的高度后，父容器的滚动条会自动消失，然而页面会回到滚动层初始化的状态，页面都没有一点儿滚动，而隐藏弹出层的时候，需要将页面设置到之前滚动的状态，这样整个页面交互会出现一闪，页面跳动的现象，影响用户体验；因此现有技术并不是从根本阻止事件的穿透，还是会触发被遮盖层的touch事件，只是设置了一个固定的屏高，让其不能进行滚动。
技术实现思路
有鉴于此，本专利技术提供一种页面的显示方法和装置，对于在移动终端浏览器中操作多层样式结构的场景，能够避免对最上层页面进行操作时候，操作到被遮盖层的内容的问题，从而在一定程度上提高了用户的浏览体验。为实现上述目的，根据本专利技术的一个方面，提供了一种页面的显示方法。本专利技术的页面的显示方法包括：将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面；设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值；同时显示所述变更页面、遮盖层、以及弹出层。可选地，所述设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0的步骤之后还包括：在所述遮盖层注册点击事件。可选地，所述同时显示所述变更页面、遮盖层、以及弹出层的步骤之后还包括：在发生所述点击事件后关闭遮盖层和弹出层，并将所述变更页面的left属性的值设置为0以恢复所述当前显示页面。可选地，其特征在于，所述第一预设值为第二预设值的负数。根据本专利技术的另一个方面，提供了一种页面的显示装置。本专利技术的页面的显示装置，包括：第一设置模块，用于将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面；第二设置模块，用于设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值；显示模块，用于同时显示所述变更页面、遮盖层、以及弹出层。可选地，还包括注册模块，用于在所述遮盖层注册点击事件。可选地，还包括第三设置模块，用于在发生所述点击事件后关闭遮盖层和弹出层，并将所述变更页面的left属性的值设置为0以恢复所述当前显示页面。可选地，所述第一预设值为第二预设值的负数。根据本专利技术的技术方案，对于在移动终端浏览器中操作多层样式结构的场景，能够避免对最上层页面进行操作时候，操作到被遮盖层的内容的问题，从而在一定程度上提高了用户的浏览体验。附图说明附图用于更好地理解本专利技术，不构成对本专利技术的不当限定。其中：图1是根据本专利技术实施例的一种页面的显示方法的示意图；图2是根据本专利技术实施例的一种页面的显示装置的示意图。具体实施方式以下结合附图对本专利技术的示范性实施例做出说明，其中包括本专利技术实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本专利技术的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。图1是根据本专利技术实施例的一种页面的显示方法的示意图。如图1所示，本专利技术实施例的页面的显示方法主要包括如下的步骤S10至S12。步骤S10：将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面。在移动终端中进行页面显示时，通常以移动终端的屏幕宽度作为显示页面容器的宽度值，因而在该步骤中，将当前显示的页面位置left属性值设置为第一预设值(比如-90％)，此处的left属性值用于设置当前显示页面距屏幕的左边距，即以当前屏幕作为参照物当前显示页面进行水平左移90％的宽度；然后再将前显示页面的高度设置为移动终端的屏幕高度，从而控制整个页面没有滚动；在该步骤中，所提到的第一预设值可根据弹出层内容的多少进行设置，如果弹出层需要显示内容比较多，那么所设的第一预设值就大一些；如果弹出层显示内容比较少，那么所设的第一预设值就小些，因此当弹出层的内容比较少时，第一预设值也可以设置为-80％、-70％、或-50％等。步骤S11：设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值。在该步骤中，设置遮盖层的宽度为100％，left的值为0；其中，所设遮盖层的宽度以步骤S10中提到的当前显示页面作为参照，宽度设置为100％，即正好遮住当前页面的内容部分；同时，left值设置为0，即将遮盖层的相对于当前显示页面向左对齐；以及设置弹出层的宽度为90％，即移动终端的屏幕宽度的90％，用于填充步骤S10中当前显示页面在水平左移后留出的90％屏宽区域；并且所述第二预设值随着第一预设值的改变而改变，因而保证整个弹出过程正好与移动后的页面无缝连接，并且没有横向滚动。本专利技术实施例技术方案中增加了遮盖层，不仅让用户知道下面是有东西，同时还优化了视觉效果，而且通过在遮盖层上注册点击事件，以控制弹出层的隐藏。步骤S12：同时显示所述变更页面、遮盖层、以及弹出层。在步骤S12之后，当在遮盖层发生所注册的点击事件后，关闭遮盖层和弹出层，并将所述变更页面的left属性的值设置为0以恢复所述当前显示页面。本专利技术实施例技术方案中，通过遮盖层为用户提供一个点击区域来使被遮盖的页面恢复到原来的位置。经过以上三个步骤，将显示页面中产生滚动条的区域，向左移动90％的宽度，之后根据移动终端的屏幕高度改变页面的高度，去掉了滚动条，从而即使去滑动遮盖层，也不能使整个页面滚动；同时将弹出层的面板填充右边空出来的90％的宽度，实现弹出层内部的滚动，由于已经设置了被遮盖页面的高度，因而在进行弹出层内部滚动的时候也不会影响到下一层页面的滚动。图2是根据本专利技术实施例的一种页面的显示装置的示意图。如图2所示，本专利技术实施例的页面的显示装置20主要包括第一设置模块21、第二设置模块22、以及显示模块23；第一设置模块21用于将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面；第二设置模块22用于设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值；显示模块23用于同时显示所述变更页面、遮盖层、以及弹出层；所述第本文档来自技高网...

【技术保护点】
一种页面的显示方法，其特征在于，包括：将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面；设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值；同时显示所述变更页面、遮盖层、以及弹出层。

【技术特征摘要】
1.一种页面的显示方法，其特征在于，包括：将当前显示页面位置的Left属性的值设置为第一预设值，并根据移动终端的屏幕高度设置当前显示页面的高度值以得到变更页面；设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0；以及设置弹出层的宽度为第二预设值；同时显示所述变更页面、遮盖层、以及弹出层。2.根据权利要求1所述的方法，其特征在于，所述设置遮盖层的宽度为所述当前显示页面的100％、遮盖层的Left属性的值为0的步骤之后还包括：在所述遮盖层注册点击事件。3.根据权利要求2所述的方法，其特征在于，所述同时显示所述变更页面、遮盖层、以及弹出层的步骤之后还包括：在发生所述点击事件后关闭遮盖层和弹出层，并将所述变更页面的left属性的值设置为0以恢复所述当前显示页面。4.根据权利要求1至3中任一项所述的方法，其特征在于，所...

【专利技术属性】
技术研发人员：向守来，吴海鑫，
申请(专利权)人：北京京东尚科信息技术有限公司，北京京东世纪贸易有限公司，
类型：发明
国别省市：北京;11