界面交互方法、容器组件、计算机可读存储介质及设备技术

本申请实施例提供一种界面交互方法、容器组件、计算机可读存储介质及设备。本申请实施例提供了一种容器组件。该容器组件包括第一容器和第二容器；第一容器可响应于界面操作移动，第二容器跟随第一容器移动；第一容器承载的展示内容中包含有第二容器的第一列承载区承载的第一页面；第二容器包括多列承载区，一列承载区承载一个页面；多列承载区中除第一列承载区外的承载区隐藏。第二容器可响应于界面操作切换承载区以切换页面。有上述架构的容器组件，本申请实施例提供的方案便可基于该架构的容器组件做到展示内容滑动过程无实时监听、无实时计算还能具有较好的操作体验，页面操作更顺滑，出现卡顿掉帧的概率低。出现卡顿掉帧的概率低。出现卡顿掉帧的概率低。

【技术实现步骤摘要】
界面交互方法、容器组件、计算机可读存储介质及设备


[0001]本申请涉及计算机
，尤其涉及一种界面交互方法、容器组件、计算机可读存储介质及设备。

技术介绍

[0002]客户端应用界面的交互体验越来越重要，好的交互体验能带来诸多效益。现阶段，电商客户端应用的导购页面(如首页)大多是通过H5(HTML5，HyperTwxt Markup Language,第五次修改的超文本标记语言)来实现的。这些页面在用户操作过程中，容易出现卡顿掉帧的情况，操作不顺滑。

技术实现思路

[0003]为改善现有技术存在的问题，本申请提供了一种界面交互方法、容器组件、计算机可读存储介质及设备。具体的，
[0004]在本申请的一个实施例中，提供了一种界面交互方法。该方法包括：
[0005]显示第一容器承载的展示内容；其中，所述展示内容包括第二容器的第一列承载区承载的第一页面；所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；
[0006]响应于滑动指令，所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示；
[0007]响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置；
[0008]响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。
[0009]在本申请的另一个实施例中，还提供了一种容器组件。该容器组件包括第一容器和第二容器；其中，
[0010]第一容器用于承载展示内容，所述展示内容包括第二容器的第一列承载区承载的第一页面；
[0011]所述第一容器还用于响应滑动指令移动，所述第二容器跟随所述第一容器移动，使得所述展示内容滑动显示；
[0012]所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；
[0013]所述第二容器还用于响应于切换指令切换承载区。
[0014]在本申请的又一实施例中，还提供了一种界面交互装置。该装置包括：
[0015]第二容器，包括多列承载区，一列承载区承载一个页面；
[0016]第一容器，用于承载展示内容；所述展示内容包括所述第二容器的第一列承载区
承载的第一页面，所述多列承载区中除所述第一列承载区外的承载区隐藏；
[0017]交互组件，用于响应于滑动指令，控制所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示；还用于响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置；还用于响应于所述切换指令，控制所述第二容器切换，以隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。
[0018]本申请实施例还提供一种包括存储器、处理器及显示器；其中，所述存储器，用于存储计算机程序；
[0019]所述处理器，用于与所述存储器和所述显示器耦合，用于执行所述存储器中存储的所述计算机程序，以用于实现上述实施例提供的界面交互方法中的步骤。
[0020]本申请实施例还提供一种存储有计算机指令的计算机可读存储介质，当所述计算机指令被一个或多个处理器执行时，使得所述一个或多个处理器执行上述界面交互方法中的步骤。
[0021]本申请还有一实施例提供一种计算机程序产品，该计算机程序产品包括计算机程序或指令，当所述计算机程序或指令被处理器执行时，使得所述处理器执行上述界面交互方法中的步骤。
[0022]本申请实施例提供的一个技术方案中提供了一种容器组件。该容器组件包括第一容器和第二容器；第一容器可响应于界面操作移动，第二容器跟随第一容器移动；第一容器承载的展示内容中包含有第二容器的第一列承载区承载的第一页面；第二容器包括多列承载区，一列承载区承载一个页面；多列承载区中除第一列承载区外的承载区隐藏。第二容器可响应于界面操作切换承载区以切换页面。
[0023]有上述架构的容器组件作为基础，本申请实施例提供的方案便可基于该架构的容器组件做到展示内容滑动过程无实时监听、无实时计算还能具有较好的操作体验。具体的，本申请实施例提供的方案中，因为第二容器跟随第一容器移动，所以在发生切换指令时，再获取第一容器承载的展示内容的滑动信息，基于该滑动信息便可确定出当前要被切换走的第一页面的历史浏览记录，以在后续第一页面被切换回时用以定位第一页面的浏览位置。可见，本申请实施例提供的技术方案，能做到第一容器移动、第二容器随动过程中不需要实时跟踪监听计算，这就避免了实时监听计算对线程的占用，这就有助于提高页面的操作顺滑性。经过实际测试，进一步验证本申请实施例提供的技术方案，页面操作更顺滑，出现卡顿掉帧的概率低。
[0024]进一步的，本申请各实施例可基于React实现，这样在web浏览器环境下兼容性高，可投放在任意H5场景，且改动和发布成本均降低。
附图说明
[0025]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0026]图1为本申请一实施例提供的一种容器组件的结构示意图；
[0027]图2为本申请一实施例提供的容器组件中第二容器跟随第一容器移动使得多个标签4吸顶后的示意图；
[0028]图3为本申请一实施例提供的界面交互方法的流程示意图；
[0029]图4a为本申请一实施例示出的多个标签4滑动距离的示意图；
[0030]图4b为本申请一实施例示出的第二容器跟随第一容器移动后第一页面滑动距离的示意图；
[0031]图5为本申请一实施例提供的界面交互装置的结构框图；
[0032]图6为本申请一实施例提供的电子设备的结构示意图；
[0033]图7示出了采用本申请实施例提供的技术方案实现的交互界面，用户上滑操作后第二容器的第一列承载区承载的页面a展示在可视界面内的示意图；
[0034]图8示出了用户右滑操作后第二容器的第一列承载区隐藏，第二列承载区承载的页面b展示在可视界面内的示意图。
具体实施方式
[0035]为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。在本申请的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种界面交互方法，其特征在于，包括：显示第一容器承载的展示内容；其中，所述展示内容包括第二容器的第一列承载区承载的第一页面；所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；响应于滑动指令，所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示；响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置；响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。2.根据权利要求1所述的方法，其特征在于，基于所述滑动信息，确定所述第一页面的历史浏览记录，包括：基于所述滑动信息，确定所述第二容器在可视界面上的第一滑动距离；基于所述滑动信息，确定所述第一页面的第二滑动距离；根据所述第一滑动距离和所述第二滑动距离，确定所述第一页面的历史浏览记录。3.根据权利要求2所述的方法，其特征在于，所述展示内容还包括多个标签，一个标签与一列承载区承载的页面关联；以及所述方法还包括：响应于所述滑动指令，所述多个标签移动，移动至可视界面的设定位置时维持在所述设定位置不动；将所述多个标签的滑动距离作为所述第二容器在所述可视界面上的第一滑动距离，记录在所述滑动信息中。4.根据权利要求1至3中任一项所述的方法，其特征在于，显示所述第二容器的第二列承载区承载的第二页面，包括：若所述第二页面对应有历史浏览记录，则根据所述第二页面的历史浏览记录，定位所述第二页面的浏览位置；基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面。5.根据权利要求4所述的方法，其特征在于，基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面，包括：根据所述第二页面的浏览位置，设置所述第二页面相对所述第二容器的第二列承载区的顶部偏移padding
‑
top值；按照所述顶部偏移padding
‑
top值，在所述第二列承载区内显示所述第二页面。6.根据权利要求4所述的方法，其特征在于，显示所述第二容器的第二列承载区承载的第二页面之前，还包括：显示由所述第一页面切换为第二页面的...

【专利技术属性】
技术研发人员：陈庆伟，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：