一种页面内容的加载方法和装置与流程

1.本技术涉及计算机技术领域，特别是涉及一种页面内容的加载方法和一种页面内容的加载装置。


背景技术：

2.通常采用网页对页面内容进行展现，在所需要展现的页面内容数据量过大时，将会页面的卡顿，此时可以将所要展现的页面内容数据以分页的形式展现。其中，传统的分页形式展现需要用户手动点击下一页加载页面内容，其所带来的分页效果并不好，大部分网页采用的是无限分页的模式。
3.针对无限分页模式的页面内容加载，基于用户自上而下的浏览习惯，常规的分页内容浏览交互方式主要是通过上拉当前页面，控制网页视图窗口到达页面内容的底部，自动加载下一页的页面内容，下一页的页面内容可以直接拼接在滚动容器底部；但在某些部分服务，例如聊天场景中需要通过下拉当前页面以加载更多内容，然而这种下拉加载内容的交互方式，在实现上需要触发两次刷新，可能造成页面内容在下拉加载的过程中出现页面闪动的问题。


技术实现要素：

4.鉴于上述问题，提出了本技术实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种页面内容的加载方法和相应的一种页面内容的加载装置。
5.本技术实施例公开了一种页面内容的加载方法，所述方法包括：
6.检测到用户对当前页面的下拉操作时，对所述当前页面的滚动容器进行翻转操作；
7.响应对翻转前滚动容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，以及获取未展示在当前页面的目标页面内容；
8.在所述翻转后的滚动容器的底部加载并展示所述目标页面内容。
9.可选地，在所述对所述当前页面的滚动容器进行翻转操作之前，还包括：
10.对所述滚动容器中的原有页面内容按照倒向顺序进行排序；
11.所述滚动容器内部具有滚动条；所述对所述当前页面的滚动容器进行翻转操作，包括：
12.获取所述滚动容器的顶部位置以及基于所述下拉操作后所述滚动条的滚动位置；
13.根据所述顶部位置和所述滚动条的滚动位置确定滚动距离；
14.在所述滚动距离满足触发所述滚动容器翻转的预设位置高度时，对所述滚动容器进行翻转操作，以使所述滚动容器处于翻转状态。
15.可选地，所述滚动容器内部具有文档流，所述对所述滚动容器进行翻转操作，还包括：
16.设置所述滚动容器的文档流按照从右至左进行排版。
17.可选地，所述滚动容器内部具有文档流，所述文档流包括在所述滚动容器中多个子节点的文档流，所述对所述滚动容器进行翻转操作，还包括：
18.获取在各个子节点的文档流中存在的展示在当前页面的原有页面内容和未展示在当前页面的目标页面内容；
19.对在所述滚动容器中展示在当前页面的原有页面内容和未展示在当前页面的目标页面内容按照从左到右的正向顺序进行排序。
20.可选地，所述获取未展示在当前页面的目标页面内容，包括：
21.响应针对翻转后滚动容器的上拉操作，拉取当前页面未展示的目标页面内容。
22.可选地，所述对翻转前滚动容器所在页面的下拉操作包括向上的鼠标滚动操作；所述响应对翻转前滚动容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，包括：
23.获取所述翻转后滚动容器中的滚轮事件，改写所述滚轮事件以使针对所述向上的鼠标滚动操作为对翻转后滚动容器的上拉操作；
24.所述改写所述滚轮事件，包括：
25.在检测到对翻转前滚动容器所在页面向上的鼠标滚动操作时，改写所述滚轮事件的滚动方向为相对当前翻转后滚动容器所在页面向上的滚动位置方向。
26.可选地，所述对翻转前滚动容器所在页面的下拉操作包括向下的滑动操作；所述响应对当前翻转后滚动容器的页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，包括：
27.获取所述翻转后滚动容器中的滑动事件，改写所述滑动事件以使针对所述向下的滑动操作为对翻转后滚动容器的上拉操作；
28.所述改写所述滑动事件，包括：
29.在检测到对翻转前滚动容器所在页面向下的滑动操作时，改写所述滑动事件的滚动方向为相对当前翻转后滚动容器所在页面向上的滑动位置方向。
30.可选地，所述在所述翻转后的滚动容器的底部加载并展示所述目标页面内容，包括：
31.对所述目标页面内容按照倒向顺序进行排序以及翻转操作；
32.在所述翻转后的滚动容器的底部拼接加载和展示进行倒向顺序排序与翻转操作后的目标页面内容。
33.本技术实施例还公开了一种页面内容的加载装置，所述装置包括：
34.滚动容器翻转模块，用于检测到用户对当前页面的下拉操作时，对所述当前页面的滚动容器进行翻转操作；
35.目标页面内容获取模块，用于响应对翻转前滚动容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，以及获取未展示在当前页面的目标页面内容；
36.目标页面内容加载模块，用于在所述翻转后的滚动容器的底部加载并展示所述目标页面内容。
37.可选地，在所述对所述当前页面的滚动容器进行翻转操作之前，所述装置还包括：
38.倒向排序模块，用于对所述滚动容器中的原有页面内容按照倒向顺序进行排序。
39.可选地，所述滚动容器内部具有滚动条；所述滚动容器翻转模块包括：
40.滚动位置获取子模块，用于获取所述滚动容器的顶部位置以及基于所述下拉操作后所述滚动条的滚动位置；
41.滚动距离确定子模块，用于根据所述顶部位置和所述滚动条的滚动位置确定滚动距离；
42.滚动容器翻转子模块，用于在所述滚动距离满足触发所述滚动容器翻转的预设位置高度时，对所述滚动容器进行翻转操作，以使所述滚动容器处于翻转状态。
43.可选地，所述滚动容器内部具有文档流，所述滚动容器翻转模块还包括：
44.文档流排版设置子模块，用于设置所述滚动容器的文档流按照从右至左进行排版。
45.可选地，所述文档流包括在所述滚动容器中多个子节点的文档流，所述滚动容器翻转模块还包括：
46.页面内容获取子模块，用于获取在各个子节点的文档流中存在的展示在当前页面的原有页面内容和未展示在当前页面的目标页面内容；
47.页面内容排序子模块，用于对在所述滚动容器中展示在当前页面的原有页面内容和未展示在当前页面的目标页面内容按照从左到右的正向顺序进行排序。
48.可选地，所述目标页面内容获取模块包括：
49.目标页面内容拉取子模块，用于响应针对翻转后滚动容器的上拉操作，拉取当前页面未展示的目标页面内容。
50.可选地，所述对翻转前滚动容器所在页面的下拉操作包括向上的鼠标滚动操作；所述目标页面内容获取模块包括：
51.滚轮事件改写子模块，用于获取所述翻转后滚动容器中的滚轮事件，改写所述滚轮事件以使针对所述向上的鼠标滚动操作为对翻转后滚动容器的上拉操作；
52.可选地，所述滚轮事件改写子模块包括：
53.滚轮事件改写单元，用于在检测到对翻转前滚动容器所在页面向上的鼠标滚动操作时，改写所述滚轮事件的滚动方向为相对当前翻转后滚动容器所在页面向上的滚动位置方向。
54.可选地，所述对翻转前滚动容器所在页面的下拉操作包括向上的鼠标滚动操作；所述目标页面内容获取模块包括：
55.滑动事件改写子模块，用于获取所述翻转后滚动容器中的滑动事件，改写所述滑动事件以使针对所述向下的滑动操作为对翻转后滚动容器的上拉操作；
56.可选地，所述滑动事件改写子模块包括：
57.滑动事件改写单元，用于在检测到对翻转前滚动容器所在页面向下的滑动操作时，改写所述滑动事件的滚动方向为相对当前翻转后滚动容器所在页面向上的滑动位置方向。
58.可选地，所述目标页面内容加载模块包括：
59.目标页面内容处理子模块，用于对所述目标页面内容按照倒向顺序进行排序以及翻转操作；
60.目标页面内容加载子模块，用于在所述翻转后的滚动容器的底部拼接加载和展示
进行倒向顺序排序与翻转操作后的目标页面内容。
61.本技术实施例还公开了一种电子设备，包括：处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现任一项所述页面内容的加载方法的步骤。
62.本技术实施例还公开了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现任一项所述页面内容的加载方法的步骤。
63.本技术实施例包括以下优点：
64.在本技术实施例中，检测到用户对当前页面的下拉操作时，可以对当前页面的滚动容器进行翻转操作，此时可以响应对翻转前的容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，以及获取当前页面未展示的目标页面内容，并在翻转后的滚动容器的底部加载并展示所获取的目标页面内容。通过旋转容器后的上拉加载方式实现对下拉加载方式的模拟，以便在基于下拉操作时能够按照上拉加载方式，将下一页内容直接拼接到滚动容器的底部拉取数据，保证下拉加载方式获得与上拉加载方式类似的体验，在不需要额外实时记录滚动容器位置信息的情况下，实现无闪动、不卡顿以及能够自然展示所拉取的页面内容。
附图说明
65.图1是相关技术中下拉加载页面内容的过程示意图；
66.图2是本技术实施例所提供的一种页面内容的加载方法的步骤流程图；
67.图3是本技术实施例所提供的另一种页面内容的加载方法的步骤流程图；
68.图4是本技术实施例所提供的对滚动容器进行翻转的过程示意图；
69.图5是本技术实施例所提供的针对文档流的排版设置的过程示意图；
70.图6是本技术实施例所提供的滚轮事件改写前后的示意图；
71.图7是本技术实施例所提供的页面内容的加载的实施过程示意图；
72.图8是本技术实施例所提供的滚动容器中页面内容的示例图；
73.图9是现有技术与本技术实施例中页面内容方式的页面效果对比图；
74.图10是本技术实施例所提供的一种页面内容的加载装置的结构框图。
具体实施方式
75.为使本技术的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本技术作进一步详细的说明。
76.对于页面内容的加载，大多数采用无限分页的模式，针对无限分页模式的页面内容加载方式，可以基于所要实现的服务场景分为符合用户自上而下浏览习惯的上拉(或向上滑动)的页面内容加载方式，和部分服务场景下需要下拉(向下滑动)的页面内容加载方式。
77.其中，对于部分服务场景下需要下拉的页面加载方式，在技术实现上需要记录滚动容器的位置信息以及需要提前计算下一页加载的网页内容的高度，可能造成页面内容在下拉加载的过程中出现页面闪动的问题。
78.具体的，如图1所示，相关技术中的下拉加载页面内容方式，在其技术实现上，可以通过页面检测判定是否存在用户对屏幕上当前页面的下拉操作，若存在对当前页面的下拉操作，可以在用户对当前页面进行下拉的过程中判断用户是否下拉到页面顶部，在判断用户下拉到当前页面的顶部时可以将请求/拉取的新增内容重新追加到原有数据的基础上实现对新增内容的下拉加载。
79.其中，在判定存在对当前页面的下拉操作后，主要可以通过检测基于下拉操作所进行的容器滚动距离页面顶部的滚动距离，在此滚动距离满足预先设定的下拉到页面顶部的距离时，可以触发下拉加载方式的加载逻辑；在触发下拉加载的加载逻辑，并加载完成后可以进入渲染ui(user interface，用户界面)环节，首先可以记录当前滚动容器的滚动位置，然后拉取未展示在当前页面的目标页面内容，在当前容器的滚动头部插入新增渲染内容，即插入新增的目标页面内容，以实现在原有数据的基础上对新增内容的下拉加载，且由于在滚动头部直接插入新增内容必然会导致页面展示的原有内容的位置被往下移动，导致出现阅读不连贯的现象，此时可以恢复用户之前浏览的滚动位置。
80.然而，相关技术中的下拉加载页面内容方式，基于对保证下拉加载过程中内容的阅读连续性的考虑，需要对之前的浏览位置(即用户之前浏览的滚动位置)进行恢复操作，但对于浏览位置的确定存在较大的误差，造成页面内容在下拉加载的过程中出现页面闪动的问题。即相关技术中的下拉加载页面内容方式可能存在以下缺点：
81.(1)从下一页内容的渲染开始到渲染完成之间具有时间差，此时间差完全由浏览器的渲染线程决定，无法在技术上获取时间差，受到时间差的影响所记录的之前浏览的滚动位置可能与在插入新增渲染内容后所要恢复的浏览位置存在误差；(2)在下一页内容渲染完成，即插入新增渲染内容之后，需要获取滚动容器的滚动高度才能计算出实际需要恢复的浏览位置，那么意味着对浏览位置的恢复时机是相对下一页内容的渲染时机而言较晚，所造成的两次渲染将会导致在下拉加载内容的过程中出现闪动效果，所出现的闪动效果在低端设备上更为明显。
82.本技术实施例的核心思想之一是提出旋转滚动容器后的上拉加载方式实现对下拉加载的模拟方案，通过翻转滚动容器以及结合响应在翻转后滚动容器的下拉加载，其下拉加载本质上对于翻转后滚动容器而言是上拉方式来实现对页面内容的加载，在基于下拉操作时能够按照上拉加载方式，将下一页内容直接拼接到滚动容器的底部拉取数据，保证下拉加载方式获得与上拉加载方式类似的体验，在不需要额外实时记录滚动容器位置信息的情况下，实现无闪动、不卡顿以及能够自然展示所拉取的页面内容。
83.参照图2，示出了本技术实施例所提供的一种页面内容的加载方法的步骤流程图，具体可以包括如下步骤：
84.步骤201，检测用户对当前页面的下拉操作，对当前页面的滚动容器进行翻转操作。
85.在本技术实施例中，通过提出旋转滚动容器后的上拉加载方式实现对下拉加载的模拟方案，实现对页面内容的下拉加载。
86.在具体实现中，通过旋转滚动容器上拉模拟下拉加载的方式可以应用在能够加载页面内容的任意页面程序，例如web浏览器、pc版im(instant messaging，即时通信)页面、小程序im页面等，在页面程序的开发过程中可以对滚动容器进行设置，滚动容器作为页面
程序的组件，能够提供滚动属性等设置实现页面程序上页面内容和其他元素，例如滚动条的显示控制，其包括对滚动相关事件(包括惯性滚动结束后回调、下拉刷新回调、上拉刷新回调等)、窗口视图的高度和宽度、页面内容的高度和宽度、滚动位置等的设置。在本技术的一种实施例中，在通过旋转滚动容器上拉模拟下拉加载的方式中，任意页面程序可以在检测到用户对当前页面的下拉操作时，首先需要对滚动容器进行翻转，使得所检测到的下拉操作的下拉加载方式，在本质上对于翻转后的滚动容器而言实则为上拉加载方式，以实现下拉加载方式对上拉加载方式的模拟。
87.具体的，对当前页面的下拉操作的检测方式可以通过页面检测实现，即通过页面检测判定是否存在用户对屏幕上当前页面的下拉操作，若存在对当前页面的下拉操作，且检测到基于下拉操作所进行的容器滚动到某个特定位置，则可以自动触发本技术实施例中旋转容器上拉模拟下拉加载的加载逻辑，对当前页面的滚动容器进行翻转操作。
88.在实际应用中，对于加载逻辑的特定位置触发，滚动容器内部可以具有滚动条，此时可以获取滚动容器的顶部位置以及基于下拉操作后滚动条的滚动位置，并采用所获取的顶部位置和滚动条的滚动位置确定基于下拉操作所进行的滚动距离，在滚动距离满足触发滚动容器翻转的预设位置高度时，可以对滚动容器进行翻转操作，翻转操作指的是控制滚动容器在方向上进行旋转，使滚动容器处于翻转状态的操作，主要可以控制滚动容器按照顺时针或者逆时针方向旋转180
°
进行翻转，将滚动容器的顶部的位置和底部的位置进行调换，即翻转后滚动容器的顶部的位置实际上是翻转前滚动容器的底部的位置。其中，所触发的滚动容器翻转的预设位置高度，可以指的是在用户所进行的下拉操作所进行的容器滚动到页面顶部的位置高度。
89.在一种优选的实施例中，处于翻转状态的滚动容器，其翻转后的滚动容器的底部相当于翻转前滚动容器的顶部，为了保证需要基于下拉操作方式的从滚动容器的顶部(即翻转后容器底部所模拟的顶部)插入新加载的页面内容，此时需要提前对滚动容器内的页面内容进行处理。
90.具体的，如图1所示，对于未翻转的滚动容器而言，其加载的页面内容对于页面程序而言，可以是基于下拉操作的从下往上的顺序对内容进行加载的，例如a
‑
b
‑
c
‑
d
‑
e
‑
f
‑
g
‑
l
‑
i
‑
j，即其内容加载逻辑是对包含有abcde的页面内容所在页的下拉加载而言，其所加载的下一页是包含有fglij的页面内容所在页，且对于用户视觉上的阅读习惯而言，基于下拉操作而言为在滚动容器的顶部插入的顺序从上往下对内容进行阅读的，例如展示顺序为e
‑
d
‑
c
‑
b
‑
a，即在文档流e节点后加载新增内容；若只对滚动容器进行翻转，对于页面程序而言，其遵循的下拉加载顺序将会变成j
‑
i
‑
l
‑
g
‑
f
‑
e
‑
d
‑
c
‑
b
‑
a的顺序，即其内容加载逻辑变成对包含有fglij的页面内容所在页的下拉操作，将会加载包含有abcde的页面内容所在页，那么对于包含有abcde的页面内容所在页的下拉加载而言其并不存在加载的内容，即并不存在滚动容器的顶部所插入的内容，为了避免翻转后的滚动容器的内容加载逻辑发生改变，在对当前页面的滚动容器进行翻转操作之前，还可以对滚动容器中的页面内容按照倒向顺序进行排序，例如将“e
‑
d
‑
c
‑
b
‑
a”的展示顺序变为“a
‑
b
‑
c
‑
d
‑
e”，由于下拉加载的方式始终需要从滚动容器的顶部插入新加载的页面内容，且翻转后的滚动容器的底部相当于翻转前滚动容器的顶部，倒向顺序排序的调整可以保证始终从文档流e节点后加载新增内容。
91.步骤202，响应对翻转前滚动容器所在页面的下拉操作，确定当前下拉操作为针对
翻转后滚动容器的上拉操作，以及获取未展示在当前页面的目标页面内容。
92.在本技术的一种实施例中，在对滚动容器的原有页面内容按照倒向顺序进行排序以及对滚动容器进行翻转操作之后，可以响应用户对翻转前滚动容器所在页面的下拉操作，对所要加载的目标页面内容进行获取，以便在翻转后的滚动容器中对所获取的目标页面内容进行加载并展示。
93.具体的，所获取的用于加载和展示的目标页面内容可以是在旋转后的滚动容器中基于下拉操作拉取的新增内容，即未展示在当前页面的目标页面内容。
94.其中，滚动容器的翻转对于用户而言是无感知的，即翻转后的滚动容器并不能在页面上展示给用户，站在用户角度，其下拉操作是作用于翻转前滚动容器所在页面的下拉操作，虽然滚动容器在页面程序内部逻辑上已发生翻转，但用户所作用的下拉操作依旧是针对当前页面的，那么在页面层面上用户所作用的下拉操作，在基于对滚动容器的翻转后，同样也可以是针对翻转后滚动容器所在页面的下拉操作，但对于页面程序内部逻辑中已翻转的滚动容器而言，其实际上是对滚动容器的上拉操作。
95.在实际应用中，在页面程序响应用户的下拉操作进行新增内容拉取与加载时，针对当前翻转后滚动容器的页面的下拉操作是站在用户角度而言的下拉操作，而实际上控制页面显示与加载的是位于页面程序内部的滚动容器组件，针对当前翻转后滚动容器的上拉操作是对于页面内容的内部加载逻辑而言的上拉操作，即页面内容的加载主要是依据对滚动容器的操作实现的。
96.步骤203，在翻转后的滚动容器的底部加载并展示目标页面内容。
97.在实际应用中，翻转后的滚动容器的底部相当于翻转前滚动容器的顶部，那么基于响应针对页面的下拉操作所获取的目标页面内容，在加载和展示时可以从翻转后的滚动容器的底部进行加载，以完成采用旋转滚动容器并上拉加载的方式模拟下拉加载的方式实现页面内容的展示。
98.其中，从翻转后的滚动容器的底部加载与展示目标页面内容，从滚动容器的底部对新增内容进行加载的方式，符合滚动容器的上拉加载方式，此时可以将新拉取的下一页的目标页面内容直接拼接到滚动容器底部完成拉取加载。需要说明的是，下一页的目标页面内容只是被旋转180
°
之后展示，滚动容器的加载逻辑实际还是通过上拉方式加载下一页的内容，无需对加载完成后的滚动容器重新记录、计算、渲染，即无需记录滚动容器的当前位置信息和计算下一页内容高度以确定浏览位置，实现无闪动且自然的展示下一页内容。
99.在本技术实施例中，检测到用户对当前页面的下拉操作时，可以对当前页面的滚动容器进行翻转操作，此时可以响应对翻转前的容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，以及获取当前页面未展示的目标页面内容，并在翻转后的滚动容器的底部加载并展示所获取的目标页面内容。通过旋转容器后的上拉加载方式实现对下拉加载方式的模拟，以便在基于下拉操作时能够按照上拉加载方式，将下一页内容直接拼接到滚动容器的底部拉取数据，保证下拉加载方式获得与上拉加载方式类似的体验，在不需要额外实时记录滚动容器位置信息的情况下，实现无闪动、不卡顿以及能够自然展示所拉取的页面内容。
100.参照图3，示出了本技术实施例所提供的另一种页面内容的加载方法的步骤流程图，具体可以包括如下步骤：
101.步骤301，检测基于下拉操作所进行的容器滚动到特定位置，对滚动容器的页面内容按照倒向顺序进行排序并对滚动容器进行翻转操作。
102.在本技术实施例中，在检测到用户对当前页面的下拉操作时，若基于下拉操作所进行的滚动容器滚动到符合触发加载逻辑的特定位置时，页面程序对通过旋转滚动容器后上拉模拟下拉加载方式的加载逻辑进行触发，为了保证滚动容器中基于下拉操作的内容加载逻辑不变，以及为了通过滚动容器的上拉加载方式能够实现模拟下拉加载方式，对滚动容器的页面内容按照倒向顺序进行排序并对滚动容器进行翻转操作，以使得滚动容器处于翻转状态。
103.在实际应用中，所进行的翻转操作具体可以通过css3(cascading style sheets level3，层叠样式表，是一种用来表现html或xml等文件样式的计算机语言，可用于控制web页面的外观)技术中的“transform:rotate(180deg)”设置实现。其中，transform是用于对元素进行旋转、缩放、移动或倾斜的属性，“rotate(180deg)”可以为transform属性的属性值，用于表示在对元素进行旋转时能够旋转180
°
，在本技术实施例中，所控制的元素可以是滚动容器，即将滚动容器旋转180
°
以实现翻转。
104.在具体实现中，在对滚动容器进行翻转操作后，翻转后的滚动容器内部所具有的滚动条可能出现倒转的问题，即在将滚动容器旋转180
°
后，旋转之后的容器滚动条也将会随着滚动容器一起旋转。如图4所示，在滚动容器翻转前，正常的滚动条位于滚动容器的右侧，而在对滚动容器翻转后，其所具有的滚动条依旧位于滚动容器的右侧，但对于用户对页面内容的阅读视觉角度而言，旋转后的滚动条位于滚动容器的左侧，其并不符合用户视觉上的阅读习惯，那么此时可以对翻转后的滚动容器的排版进行重新设置。
105.对排版的重新设置可以通过web排版技术实现，在web排版技术中存在文档流的概念，即滚动容器内部具有文档流，文档流可以指的是在用于展示页面内容的滚动容器中可显示对象(即页面内容)在排列时所占用的位置，文档流中默认的行为可以是自上而下分为一行行，并对在每行中按从左到右的顺序排放元素(如图4中自上而下排列的“a
‑
b
‑
c
‑
d”，且每行中具有符合用户阅读习惯的从左到右排列的内容)，其中滚动条作为用于展示页面内容的滚动容器中的元素，也同样受到文档流中默认行为的约束，此时只需对滚动容器中默认的文档流进行重新设置/定制即可保证所展示的滚动条符合用户的视觉阅读习惯。
106.需要说明的是，滚动条虽然作为用于展示页面内容的滚动容器中的元素，其在滚动容器的文档流中不具有能够独立设置的子节点，为了对滚动条元素的位置进行设置，需要通过设置滚动容器的文档流实现。
107.具体的，参照图5，示出了本技术实施例所提供的针对文档流的排版设置的过程示意图，主要是设置滚动容器的文档流按照从右至左进行排版(即反向排序，文本的默认方向从左到右)，以使得旋转后的滚动容器的整个文档流中所包含的元素，即滚动条、页面内容等元素的排版顺序全部反向，使得文档流中所包含的滚动条的位置，站在用户对页面内容的阅读角度，能够位于滚动容器的右侧，滚动条元素在视觉上符合用户的阅读习惯。
108.其中，文档流从右至左的排版设置可以通过css3技术中的“direction:rtl”设置实现，direction是用于对规定文本的方向/书写方向的属性，当其属性值为rtl(即right to left)时，可以实现文档流从右至左的排版，例如图5的文档流中包含有“abcde”页面内容和滚动条的反向排版。
109.对滚动容器中默认的文档流的重新设置操作，其按照从右至左的排版设置将会影响到文档流中的所有节点(包括页面内容、滚动条、页面顶部、页面底部等)，即无论其页面内容还是滚动条的排版顺序均反向，虽然反向排版的滚动条的位置能够符合用户的阅读习惯，但反向排版的页面内容在视觉上不符合用户的阅读习惯，这里需要对文档流中所包含的页面内容元素的排版再次进行调整。
110.在具体实现中，滚动容器的文档流中具有能够独立设置页面内容的子节点，即滚动容器的文档流可以包括多个针对不同行页面内容相应子节点的文档流，那么仅对页面内容元素再次进行的排版调整，可以通过恢复滚动容器中子节点自身的文档流的排版实现。
111.在实际应用中，可以获取在各个子节点的文档流中存在的展示在当前页面的页面内容和未展示在当前页面的页面内容，然后对在滚动容器中展示在当前页面的页面内容和未展示在当前页面的页面内容按照从左到右的正向顺序(为文本的默认方向)进行排序，实现不同行页面内容自身文档流的恢复。具体可以通过css3技术中的“direction:ltr(即left to right)”改变容器子节点文档流的排版，所改变的子节点可以指的是页面内容的节点，实现滚动容器中的页面内容按照文本的默认方向，符合用户视觉上的阅读习惯。
112.需要说明的是，对于滚动容器的文档流的设置时机和针对页面内容的文档流子节点的恢复时机可以是在翻转后的滚动容器初始化完成后执行，对此，本技术实施例不加限制。
113.步骤302，检测到对当前翻转后滚动容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作。
114.在本技术的一种实施例中，基于下拉操作所进行的滚动容器滚动到符合触发加载逻辑的特定位置时，页面程序可以对通过旋转容器后上拉模拟下拉加载方式的加载逻辑进行触发，在对滚动容器的页面内容按照倒向顺序进行排序以及对滚动容器进行翻转操作之后，翻转后的滚动容器的底部相当于翻转前滚动容器的顶部，从滚动容器的底部对内容进行加载的方式，符合滚动容器的上拉加载方式，即实现旋转容器后的上拉加载方式对下拉加载方式的模拟。
115.其中，所检测到的针对翻转前滚动容器所在页面的下拉操作，即针对当前翻转后滚动容器所在页面的下拉操作，本质上对于翻转后滚动容器而言实则是上拉加载方式，即对于翻转后的滚动容器而言，前述针对页面的下拉操作实际上相当于对滚动容器的上拉操作。
116.作为一种示例，对当前翻转后滚动容器的页面的下拉操作可以包括向上的鼠标滚动操作，即通过向上的鼠标滚动方向对当前页面向上滚动，可以在滚动容器的顶部插入新增内容，对当前页面进行下拉；而若要实现对当前页面的上拉，则需要通过向下的鼠标滚动方向对当前页面向下滚动，使得新增内容可以从滚动容器的底部进行插入。那么在通过旋转上拉加载容器模拟下拉加载的过程中，对于翻转后的滚动容器而言，鼠标滚动方向应当与原方向相反，即要实现基于向上的鼠标滚动方向(表现为下拉操作)对页面的上拉，用户的鼠标滚动习惯需要发生相反的变化。
117.对用户鼠标滚动习惯的相反变化设置可以借助web技术通过重写/改写滚轮事件滚轮事件(onwheel)实现，具体的，如图6所示，可以获取翻转后滚动容器中的滚轮事件，并改写滚轮事件以使针对向上的鼠标滚动操作为对翻转后滚动容器的上拉操作。
118.在实际应用中，可以在检测到对当前翻转后滚动容器的页面的向上的鼠标滚动操作时，改写滚轮事件的滚动方向为相对当前翻转后滚动容器的页面向上的滚动位置方向，将滚轮向上的页面下拉行为变成滚轮向上的页面上拉行为。
119.其中，可以通过onwheel事件中的滚动距离(e.deltay)来改变滚动容器的滚动位置，具体通过css3技术中的“scroller.scrolltop+＝
‑
e.deltay”设置实现，并阻止滚轮事件原本的默认行为，即阻止原本的滚轮向上的页面下拉行为。
120.作为另一种示例，对当前翻转后滚动容器的页面的下拉操作可以包括向下的滑动操作，即通过向下的滑动操作方向对当前页面向下滑动，可以在滚动容器的顶部插入新增内容，对当前页面进行下拉；而若要实现对当前页面的上拉，则需要通过向上的滑动方向对当前页面向上滑动，使得新增内容可以从滚动容器的底部进行插入。那么在通过旋转上拉加载容器模拟下拉加载的过程中，对于翻转后的滚动容器而言，滑动方向应当与原方向相反，即要实现基于向下的滑动操作方向(表现为下拉操作)对页面的上拉，用户的触屏滑动习惯需要发生相反的变化。
121.对用户触屏滑动习惯的相反变化设置可以通过重写/改写滚轮事件滚轮事件(onscroll)实现，在实际应用中，可以在检测到对当前翻转后滚动容器的页面的向下的滑动操作时，改写滑动事件的滑动方向为相对当前翻转后滚动容器的页面向上的滑动位置方向，将滑动向下的页面下拉行为变成滑动向上的页面上拉行为。
122.其中，可以通过onscroll事件中的滚动距离(float distancey)来改变滚动容器的滑动位置，具体通过css3技术中的“scroller.scrolltop+＝
‑
float distancey”设置实现，并阻止滑动事件原本的默认行为，即阻止原本的滑动向下的页面下拉行为。需要说明的是，前述对onwheel事件以及onscroll事件的重写/改写的时机可以在翻转后的滚动容器初始化完成后执行，且对于默认滚动行为与滑动行为的改写只针对需要使用本技术实施例中加载逻辑的滚动容器，以及服务场景中还可以存在很多不同平级和嵌套的滚动容器，这些滚动容器都是相互隔离且互不影响，在同一服务场景中允许同时存在响应下拉操作时触发当前页面的刷新、采用滚轮事件的默认行为(即向上的页面下拉行为)以及采用改写后的滚轮向上的页面上拉行为、采用滑动事件的默认行为(即向下的页面下拉行为)以及采用改写后的滑动向下的页面上拉行为，对此，本技术实施例不加限制。
123.步骤303，响应针对翻转后滚动容器的上拉操作，在翻转后滚动容器的底部加载并展示目标页面内容。
124.在本技术实施例中，翻转后的滚动容器的底部相当于翻转前滚动容器的顶部，从滚动容器的底部对内容进行加载的方式，符合滚动容器的上拉加载方式，那么可以响应针对翻转后滚动容器的上拉操作，在翻转后的滚动容器中加载并展示目标页面内容，完成采用旋转容器上拉模拟下拉加载的方式实现页面内容的展示。
125.其中，采用上拉加载的方式拉取目标页面内容，可以表现为响应针对翻转后滚动容器的上拉操作，拉取当前页面未展示的目标页面内容，在滚动容器中加载并展示目标页面内容可以表现为直接将目标页面内容拼接到翻转后的滚动容器的底部进行加载并展示。
126.在实际应用中，在每次拉取当前页面未展示的目标页面内容后，需要对目标页面内容按照倒向顺序进行排序以及翻转操作，然后在翻转后的滚动容器的底部拼接加载和展示进行倒向排序与翻转操作后的目标页面内容。需要说明的是，原来的数据已经被展示，此
时无需对已展示的页面内容进行旋转处理。
127.在本技术实施例中，通过旋转滚动容器后的上拉加载方式实现对下拉加载方式的模拟，以便在基于下拉操作时能够按照上拉加载方式，将下一页内容直接拼接到滚动容器的底部拉取数据，保证下拉加载方式获得与上拉加载方式类似的体验，在不需要额外实时记录滚动容器位置信息的情况下，实现无闪动、不卡顿以及能够自然展示所拉取的页面内容。
128.为了便于本领域技术人员进一步理解本技术实施例所提出的页面内容的加载方法，结合页面内容的加载的实施过程示意图进行如下说明：
129.参照图7，示出了本技术实施例所提供的页面内容的加载的实施过程示意图，主要是通过旋转容器后的上拉加载方式实现对下拉加载方式的模拟，实现在基于下拉操作时能够按照上拉加载方式，将下一页内容直接拼接到滚动容器的底部实现加载与展示。
130.基于旋转上拉加载容器模拟下拉加载的实施过程具体通过对能够加载页面内容的任意页面程序的加载逻辑的触发实现，所触发的加载逻辑可以是通过旋转容器后的上拉加载方式实现对下拉加载模拟的加载逻辑，那么其实施过程也属于加载逻辑的加载过程，具体可以分为如下步骤：
131.step1：由于下拉加载的方式始终需要从滚动容器的顶部插入新加载的页面内容，为了避免翻转后的滚动容器的内容加载逻辑发生改变，页面程序可以对滚动容器中的页面内容按照倒向顺序进行排序；
132.step2：为了通过滚动容器的上拉加载方式能够实现模拟下拉加载方式，可以对滚动容器进行翻转操作，具体可以将滚动容器旋转180
°
进行翻转，以使滚动容器处于翻转状态；
133.step3：为了符合用户视觉上从左到右的阅读习惯，对滚动容器中的新增内容，即拉取的未展示在当前页面的目标页面内容旋转180
°
；
134.step4：为了符合用户视觉上从左到右以及由上到下的阅读习惯，在加载完成下一页内容时，同样可以对新增内容在按照倒向顺序进行排序与翻转操作，并在翻转后的滚动容器中对处理后的新增内容进行展示。
135.在本技术实施例中，翻转后的滚动容器的底部相当于翻转前滚动容器的顶部，从滚动容器的底部对内容进行加载的方式，符合滚动容器的上拉加载方式，那么可以响应针对翻转后滚动容器的上拉操作，在翻转后的滚动容器中加载并展示目标页面内容，完成采用旋转容器后上拉模拟下拉加载的方式实现页面内容的展示。
136.作为一种示例，在页面程序响应用户操作进行新增内容拉取与加载时，滚动容器作为页面程序的组件，能够提供滚动属性等设置实现页面程序上页面内容和其他元素，例如滚动条的显示控制，此时滚动容器中所设置的需要在程序页面所展示的页面内容可以如图8所示，其文档流从上至下可以包括a
‑
b
‑
c
‑
d
‑
e
‑
f的内容。
137.以鼠标滚轮操作为例，参照图9，示出了现有技术与本技术实施例中页面内容方式的页面效果对比图。
138.如图9中的(a)所示，为了实现页面内容的下拉加载，在检测到用户基于当前页面的上拉操作，即用户在当前页面向下(x方向)的鼠标滚动操作时，可以表现为对当前页面的页面内容的下拉加载，即按照x方向，未翻转滚动容器的底部进行内容加载，例如将位于c
‑
d
后的e
‑
f页面内容加载在当前页面。
139.如图9中(b)所示，在检测到用户基于当前页面的下拉操作，即用户在当前页面向上(y方向)的鼠标滚动操作时，可以表现为对当前页面的页面内容的上拉加载，即按照y方向进行页面内容的加载，此时从未翻转滚动容器的顶部进行内容加载，例如将位于c
‑
d前的a
‑
b页面内容从滚动容器顶部加载在当前页面。
140.如图9中(c)所示，为了实现模拟页面内容的下拉加载，在已对原有页面内容按照倒向顺序进行排序、对滚动容器进行翻转、再对新增内容在按照倒向顺序进行排序与翻转操作的基础上，在检测到用户基于当前页面的下拉操作，即用户在当前页面向上(y方向)的鼠标滚动操作时，可以表现为对当前页面的页面内容的上拉加载，即按照y方向进行页面内容的加载，此时从翻转后滚动容器的底部进行内容加载，例如将位于c
‑
d前的a
‑
b页面内容从翻转后滚动容器的底部加载在当前页面。
141.需要说明的是，本技术实施例中页面内容的加载的实施过程从交互、浏览方式、习惯上没有任何不同，其可以应用于需要下拉加载内容的特定服务场景，例如需要浏览聊天消息的im页面等，且可以适用于不同平台，例如应用小程序端或pc端等，对此，本技术不加以限制。
142.在本技术实施例中，通过旋转容器后的上拉加载方式实现对下拉加载方式的模拟，以便在基于下拉操作时能够按照上拉加载方式，将下一页内容直接拼接到滚动容器的底部拉取数据，保证下拉加载方式获得与上拉加载方式类似的体验，在不需要额外实时记录滚动容器位置信息的情况下，实现在拉取完成下一页数据并展示出来那一刻，能够无闪动、不卡顿以及自然流畅地加载并展示所拉取的页面内容。
143.需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术实施例并不受所描述的动作顺序的限制，因为依据本技术实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本技术实施例所必须的。
144.参照图10，示出了本技术实施例所提供的一种页面内容的加载装置的结构框图，具体可以包括如下模块：
145.滚动容器翻转模块1001，用于检测到用户对当前页面的下拉操作时，对所述当前页面的滚动容器进行翻转操作；
146.目标页面内容获取模块1002，用于响应对翻转前滚动容器所在页面的下拉操作，确定当前下拉操作为针对翻转后滚动容器的上拉操作，以及获取当前页面未展示的目标页面内容；
147.目标页面内容加载模块1003，用于在所述翻转后的滚动容器的底部加载并展示所述目标页面内容。
148.在本技术的一种实施例中，在所述对所述当前页面的滚动容器进行翻转操作之前，所述装置还可以包括如下模块：
149.倒向排序模块，用于对所述滚动容器中的原有页面内容按照倒向顺序进行排序。
150.在本技术的一种实施例中，所述滚动容器内部具有滚动条；滚动容器翻转模块1001可以包括如下子模块：
151.滚动位置获取子模块，用于获取所述滚动容器的顶部位置以及基于所述下拉操作后所述滚动条的滚动位置；
152.滚动距离确定子模块，用于根据所述顶部位置和所述滚动条的滚动位置确定滚动距离；
153.滚动容器翻转子模块，用于在所述滚动距离满足触发所述滚动容器翻转的预设位置高度时，对所述滚动容器进行翻转操作，以使所述滚动容器处于翻转状态。
154.在本技术的一种实施例中，所述滚动容器内部具有文档流，滚动容器翻转模块1001还可以包括如下子模块：
155.文档流排版设置子模块，用于设置所述滚动容器的文档流按照从右至左进行排版。
156.在本技术的一种实施例中，所述文档流包括在所述滚动容器中多个子节点的文档流，滚动容器翻转模块1001还可以包括如下子模块：
157.页面内容获取子模块，用于获取在各个子节点的文档流中存在的展示在当前页面的原有页面内容和未展示在当前页面的目标页面内容；
158.页面内容排序子模块，用于对在所述滚动容器中展示在当前页面的原有页面内容和未展示在当前页面的目标页面内容按照从左到右的正向顺序进行排序。
159.在本技术的一种实施例中，目标页面内容获取模块1002可以包括如下子模块：
160.目标页面内容拉取子模块，用于响应针对翻转后滚动容器的上拉操作，拉取当前页面未展示的目标页面内容。
161.在本技术的一种实施例中，所述对翻转前滚动容器所在页面的下拉操作包括向上的鼠标滚动操作；目标页面内容获取模块1002可以包括如下子模块：
162.滚轮事件改写子模块，用于获取所述翻转后滚动容器中的滚轮事件，改写所述滚轮事件以使针对所述向上的鼠标滚动操作为对翻转后滚动容器的上拉操作；
163.在本技术的一种实施例中，滚轮事件改写子模块可以包括如下子单元：
164.滚轮事件改写单元，用于在检测到对翻转前滚动容器所在页面向上的鼠标滚动操作时，改写所述滚轮事件的滚动方向为相对当前翻转后滚动容器所在页面向上的滚动位置方向。
165.在本技术的一种实施例中，所述对翻转前滚动容器所在页面的下拉操作包括向下的滑动操作；所述响应对当前翻转后滚动容器的页面的下拉操作，目标页面内容获取模块1002可以包括如下子模块：
166.滑动事件改写子模块，用于获取所述翻转后滚动容器中的滑动事件，改写所述滑动事件以使针对所述向下的滑动操作为对翻转后滚动容器的上拉操作；
167.在本技术的一种实施例中，滑动事件改写子模块可以包括如下单元：
168.滑动事件改写单元，用于在检测到对翻转前滚动容器所在页面向下的滑动操作时，改写所述滑动事件的滚动方向为相对当前翻转后滚动容器所在页面向上的滑动位置方向。
169.在本技术的一种实施例中，目标页面内容加载模块1003可以包括如下子模块：
170.目标页面内容处理子模块，用于对所述目标页面内容按照倒向顺序进行排序以及翻转操作；
171.目标页面内容加载子模块，用于在所述翻转后的滚动容器的底部拼接加载和展示进行倒向顺序排序与翻转操作后的目标页面内容。
172.对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
173.本技术实施例还提供了一种电子设备，包括：
174.包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述页面内容的加载方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
175.本技术实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储计算机程序，计算机程序被处理器执行时实现上述页面内容的加载方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
176.本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
177.本领域内的技术人员应明白，本技术实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本技术实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
178.本技术实施例是参照根据本技术实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
179.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
180.这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
181.尽管已描述了本技术实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本技术实施例范围的所有变更和修改。
182.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意
在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
183.以上对本技术所提供的一种页面内容的加载方法和一种页面内容的加载装置，进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。