一种TV应用中长列表数据的展示与交互方法、系统及介质与流程

一种tv应用中长列表数据的展示与交互方法、系统及介质
技术领域
1.本发明涉及计算机软件技术领域，特别指一种tv应用中长列表数据的展示与交互方法、系统及介质。


背景技术：

2.目前电视机的软件应用越来越多，硬件配置的提高跟不上软件开发的速度，在有限的硬件资源条件下，一些应用的使用过程中容易出现各种问题，比如常见的闪退、卡顿等现象，特别是当应用中有庞大的列表数据需要显示时，随着数据增大操作过程中画面卡顿问题越明显，影响用户体验。


技术实现要素：

3.本发明要解决的技术问题，在于提供一种tv应用中长列表数据的展示与交互方法、系统及介质，解决目前电视机应用画面卡顿的问题，兼容较低硬件配置的设备，提高应用页面操作流畅度，提高用户体验。
4.第一方面，本发明提供了一种tv应用中长列表数据的展示与交互方法，所述方法包括：步骤s10、根据业务需求设置页面中列表的排列方向，并确定其定量滚动方向；步骤s20、当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，并加载对应数据到浏览器页面中显示；当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，并加载对应数据到浏览器页面中显示；步骤s30、当焦点移动方向与定量滚动方向一致时，根据浏览器页面显示总行数或显示总列数对当前浏览器页面数据进行增删操作，同时判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作。
5.进一步的，当定量滚动方向为按行滚动时，获取的所有行数据为整行数据，当定量滚动方向为按列滚动时，获取的所有列数据为整列数据。
6.进一步的，所述步骤s20具体为：步骤21、当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，若浏览器页面显示总行数中的新增显示行未被获取到内存中，则调用接口获取本次新增显示行数据进行显示，同时预取两行存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示行到浏览器页面进行显示；步骤22、当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，若浏览器页面显示总列数中的新增显示列未被获取到内存中，则调用接口获取本次新增显示列数据进行显示，同时预取两列存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示列到浏览器页面进
行显示。
7.进一步的，所述头尾预显示行数为当前浏览器界面向上预显示固定行数和向下预显示固定行数，所述头尾预显示列数为当前浏览器界面向上预显示固定列数和向下预显示固定列数，所述固定行数和固定列数由用户自定义，当不足固定行数或固定列数可获取用于显示时，仅获取当前可获取到的数据行或数据列作为新增显示行或新增显示列。
8.进一步的，所述“判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作”具体为：判断当前浏览器版本，若为自动滚动的浏览器，则在焦点移动时只更新数据，不执行滚动操作，若为非自动滚动的浏览器，则在焦点移动时既更新数据又执行滚动操作。
9.第二方面，本发明提供了一种tv应用中长列表数据的展示与交互系统，所述系统包括：布局设置模块，用于根据业务需求设置页面中列表的排列方向，并确定其定量滚动方向；数据显示模块，用于当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，并加载对应数据到浏览器页面中显示；当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，并加载对应数据到浏览器页面中显示；以及焦点变化模块，用于当焦点移动方向与定量滚动方向一致时，根据浏览器页面显示总行数或显示总列数对当前浏览器页面数据进行增删操作，同时判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作。
10.进一步的，当定量滚动方向为按行滚动时，获取的所有行数据为整行数据，当定量滚动方向为按列滚动时，获取的所有列数据为整列数据。
11.进一步的，所述数据显示模块具体为：当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，若浏览器页面显示总行数中的新增显示行未被获取到内存中，则调用接口获取本次新增显示行数据进行显示，同时预取两行存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示行到浏览器页面进行显示；当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，若浏览器页面显示总列数中的新增显示列未被获取到内存中，则调用接口获取本次新增显示列数据进行显示，同时预取两列存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示列到浏览器页面进行显示。
12.进一步的，所述头尾预显示行数为当前浏览器界面向上预显示固定行数和向下预显示固定行数，所述头尾预显示列数为当前浏览器界面向上预显示固定列数和向下预显示固定列数，所述固定行数和固定列数由用户自定义，当不足固定行数或固定列数可获取用于显示时，仅获取当前可获取到的数据行或数据列作为新增显示行或新增显示列。
13.进一步的，所述“判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作”具体为：
判断当前浏览器版本，若为自动滚动的浏览器，则在焦点移动时只更新数据，不执行滚动操作，若为非自动滚动的浏览器，则在焦点移动时既更新数据又执行滚动操作。
14.第三方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。
15.本发明提供的一个或多个技术方案，至少具有如下技术效果或优点：根据页面排布设置定量滚动方向，并在每次焦点变化时计算下一帧需要显示的数据，与当前数据进行对比，根据比对结果只对不同部分进行更新，同时计算当前列表的滚动状态，在页面下一帧时将页面元素更新并滚动到对应位置，本发明同时将每次加载的数据和每次更新的数据降到最小值，提高资源利用率，很好的兼顾了配置低的旧设备，提高显示效率和页面流畅度，提升用户体验。
16.附图说明
17.下面参照附图结合实施例对本发明作进一步的说明。
18.图1是本发明一种tv应用中长列表数据的展示与交互方法的流程图。
19.图2是本发明一种tv应用中长列表数据的展示与交互系统的系统框图。
20.图3为本发明实施例三中介质的结构示意图。
21.图4是本发明一具体实施例中定量滚动方向为按行滚动时的焦点移动与数据行滚动界面示意图之一。
22.图5是本发明一具体实施例中定量滚动方向为按行滚动时的焦点移动与数据行滚动界面示意图之二。
具体实施方式
23.本技术实施例提供一种tv应用中长列表数据的展示与交互方法、系统和介质，用于解决目前电视机配置高低不同，一些应用在一些设备上使用时画面卡顿严重，用户体验差的问题。本发明通过设置一套定量滚动数据方式最小化数据加载量和数据更新量，使得资源配置较低的设备也可以流畅的操作应用，有利于应用的推广，同时提高用户体验。
24.为了更好地理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。
25.实施例一本发明提供了一种tv应用中长列表数据的展示与交互方法，如图1所示，所述方法包括：步骤s10、根据业务需求设置页面中列表的排列方向，并确定其定量滚动方向；步骤s20、当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，并加载对应数据到浏览器页面中显示；当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，并加载对应数据到浏览器页面中显示；步骤s30、当焦点移动方向与定量滚动方向一致时，比如当焦点移动为上下行移动且定量滚动方向也设置为按行滚动时，即为二者方向一致，根据浏览器页面显示总行数或
显示总列数对当前浏览器页面数据进行增删操作，同时判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作。
26.较佳的，当定量滚动方向为按行滚动时，获取的所有行数据为整行数据，当定量滚动方向为按列滚动时，获取的所有列数据为整列数据。
27.较佳的，所述步骤s20具体为：步骤21、当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，若浏览器页面显示总行数中的新增显示行未被获取到内存中，则调用接口获取本次新增显示行数据进行显示，同时预取两行存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示行到浏览器页面进行显示；步骤22、当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，若浏览器页面显示总列数中的新增显示列未被获取到内存中，则调用接口获取本次新增显示列数据进行显示，同时预取两列存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示列到浏览器页面进行显示。
28.较佳的，所述头尾预显示行数为当前浏览器界面向上预显示固定行数和向下预显示固定行数，所述头尾预显示列数为当前浏览器界面向上预显示固定列数和向下预显示固定列数，所述固定行数和固定列数由用户自定义，当不足固定行数或固定列数可获取用于显示时，仅获取当前可获取到的数据行或数据列作为新增显示行或新增显示列。
29.较佳的，所述“判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作”具体为：判断当前浏览器版本，若为自动滚动的浏览器，则在焦点移动时只更新数据，不执行滚动操作，若为非自动滚动的浏览器，则在焦点移动时既更新数据又执行滚动操作。
30.例如，在一具体实施例中，有一个较长的列表，将定量滚动方向为按行滚动，并设置有一个界面a，该界面a可以显示两行数据（可根据需要用户自定义）且每行数据显示5项（可根据需要用户自定义），按照头尾预显示固定行数为2（可根据需要用户自定义）的话，则浏览器b中存储的显示总行数则为6：如图4所示，在某一时刻，假设当前焦点c所在行为行2，则执行如下步骤：a1、在浏览器界面a中向上获取预显示固定行数2，但由于此时前面只有行1，因此向上无法获取到固定行数，则向下获取预显示固定行数2，得到当前需要显示在浏览器b中的数据为行1-》行4，因为在数据顶端向上取不到需要的行数，因此此时只能预显示4行，即小于预设的显示总行数6，这里的预显示4行指的是浏览器b中存储的数据，且其中只有两行为浏览器界面a中显示的数据；a2、当焦点变化时，计算当前焦点所在行，如果变化则执行步骤a3，否则结束；a3、假设焦点所在行变为3，则计算当前浏览器所需显示行为行1-》行5，对比可知浏览器b中显示行数据变化为：新增行5；a4、判断内存中是否已经获取到行5的数据，若未获取，则调用接口获取行5
ꢀ–ꢀ
行7 的数据存入内存中，这里预取两行可以防止每次行变化都进行一次获取新数据的操作，否
则，直接从内存中获取行5数据；a5、将行5插入浏览器b中进行显示，并将列表向下滚动一行，结束。
31.如图5所示，在另一时刻，假设当前焦点c所在行为行6，则执行如下步骤：b1、在浏览器界面a中向上获取预显示固定行数2，向下获取预显示固定行数2，则当前需要显示在浏览器b中的数据为行4-》行9，浏览器b显示总行数6，其中有两行是浏览器界面a中显示的；b2、当焦点变化时，计算当前焦点所在行，如果变化则执行步骤b3，否则结束；b3、假设焦点c所在行变为行7，则计算当前浏览器b所需显示行为行5-》行10，对比可知浏览器b中显示行数据变化为：新增行10，删除行4；这里的删除行4指的是浏览器中删除行4，内存中仍然保留行4的数据供后续使用；b4、判断内存中是否已经获取到行10的数据，若未获取，则调用接口获取行10
ꢀ–ꢀ
行12的数据，存入内存，这里预取两行可以防止每次行变化都进行一次获取新数据的操作，否则，直接从内存中获取行10数据；b5、将行4从浏览器b中移除，同时插入行10；浏览器b中存储的数据仍为6行，浏览器界面a中始终只显示其中两行数据；b6、判断当前浏览器版本，不同浏览器有两种行为，由于新旧数据同为 6 行，一种情况浏览器会保持当前列表的滚动状态，此时将列表向下滚动一行，结束，另一种情况浏览器会自动向下滚动一行，此时则不再主动滚动列表，直接结束。
32.基于同一发明构思，本技术还提供了与实施例一中的方法对应的装置，详见实施例二。
33.实施例二本实施例提供一种tv应用中长列表数据的展示与交互系统，如图2所示，所述系统包括：布局设置模块，用于根据业务需求设置页面中列表的排列方向，并确定其定量滚动方向；数据显示模块，用于当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，并加载对应数据到浏览器页面中显示；当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，并加载对应数据到浏览器页面中显示；以及焦点变化模块，用于当焦点移动方向与定量滚动方向一致时，比如当焦点移动为上下行移动且定量滚动方向也设置为按行滚动时，即为二者方向一致，根据浏览器页面显示总行数或显示总列数对当前浏览器页面数据进行增删操作，同时判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作。
34.较佳的，当定量滚动方向为按行滚动时，获取的所有行数据为整行数据，当定量滚动方向为按列滚动时，获取的所有列数据为整列数据。
35.较佳的，所述数据显示模块具体为：当定量滚动方向为按行滚动时，根据浏览器界面可显示行数和头尾预显示行数计算浏览器页面显示总行数，若浏览器页面显示总行数中的新增显示行未被获取到内存中，则调用接口获取本次新增显示行数据进行显示，同时预取两行存入本地，避免每次焦点变
化均进行数据获取操作，否则，直接从内存中获取本次新增显示行到浏览器页面进行显示；当定量滚动方向为按列滚动时，根据浏览器界面可显示列数和头尾预显示列数计算浏览器页面显示总列数，若浏览器页面显示总列数中的新增显示列未被获取到内存中，则调用接口获取本次新增显示列数据进行显示，同时预取两列存入本地，避免每次焦点变化均进行数据获取操作，否则，直接从内存中获取本次新增显示列到浏览器页面进行显示。
36.较佳的，所述头尾预显示行数为当前浏览器界面向上预显示固定行数和向下预显示固定行数，所述头尾预显示列数为当前浏览器界面向上预显示固定列数和向下预显示固定列数，所述固定行数和固定列数由用户自定义，当不足固定行数或固定列数可获取用于显示时，仅获取当前可获取到的数据行或数据列作为新增显示行或新增显示列。
37.较佳的，所述“判断当前浏览器版本，并根据浏览器版本判断是否随着焦点移动执行自动滚动操作”具体为：判断当前浏览器版本，若为自动滚动的浏览器，则在焦点移动时只更新数据，不执行滚动操作，若为非自动滚动的浏览器，则在焦点移动时既更新数据又执行滚动操作。
38.例如，在一具体实施例中，有一个较长的列表，将定量滚动方向为按行滚动，并设置有一个界面a，该界面a可以显示两行数据（可根据需要用户自定义）且每行数据显示5项（可根据需要用户自定义），按照头尾预显示固定行数为2（可根据需要用户自定义）的话，则浏览器b中存储的显示总行数则为6：如图4所示，在某一时刻，假设当前焦点c所在行为行2，则执行如下步骤：a1、在浏览器界面a中向上获取预显示固定行数2，但由于此时前面只有行1，因此向上无法获取到固定行数，则向下获取预显示固定行数2，得到当前需要显示在浏览器b中的数据为行1-》行4，因为在数据顶端向上取不到需要的行数，因此此时只能预显示4行，即小于预设的显示总行数6，这里的预显示4行指的是浏览器b中存储的数据，且其中只有两行为浏览器界面a中显示的数据；a2、当焦点变化时，计算当前焦点所在行，如果变化则执行步骤a3，否则结束；a3、假设焦点所在行变为3，则计算当前浏览器所需显示行为行1-》行5，对比可知浏览器b中显示行数据变化为：新增行5；a4、判断内存中是否已经获取到行5的数据，若未获取，则调用接口获取行5
ꢀ–ꢀ
行7 的数据存入内存中，这里预取两行可以防止每次行变化都进行一次获取新数据的操作，否则，直接从内存中获取行5数据；a5、将行5插入浏览器b中进行显示，并将列表向下滚动一行，结束。
39.如图5所示，在另一时刻，假设当前焦点c所在行为行6，则执行如下步骤：b1、在浏览器界面a中向上获取预显示固定行数2，向下获取预显示固定行数2，则当前需要显示在浏览器b中的数据为行4-》行9，浏览器b显示总行数6，其中有两行是浏览器界面a中显示的；b2、当焦点变化时，计算当前焦点所在行，如果变化则执行步骤b3，否则结束；b3、假设焦点c所在行变为行7，则计算当前浏览器b所需显示行为行5-》行10，对比可知浏览器b中显示行数据变化为：新增行10，删除行4；这里的删除行4指的是浏览器中删除行4，内存中仍然保留行4的数据供后续使用；
b4、判断内存中是否已经获取到行10的数据，若未获取，则调用接口获取行10
ꢀ–ꢀ
行12的数据，存入内存，这里预取两行可以防止每次行变化都进行一次获取新数据的操作，否则，直接从内存中获取行10数据；b5、将行4从浏览器b中移除，同时插入行10；浏览器b中存储的数据仍为6行，浏览器界面a中始终只显示其中两行数据；b6、判断当前浏览器版本，不同浏览器有两种行为，由于新旧数据同为 6 行，一种情况浏览器会保持当前列表的滚动状态，此时将列表向下滚动一行，结束，另一种情况浏览器会自动向下滚动一行，此时则不再主动滚动列表，直接结束。
40.基于同一发明构思，本技术提供了实施例一对应的存储介质，详见实施例三。
41.实施例三本实施例提供一种计算机可读存储介质，如图3所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。
42.本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：根据用户需求设置页面排布方式，再根据排布方式设置定量滚动方向，并在每次焦点变化时计算下一帧浏览器需要显示的数据，与当前数据进行对比，根据比对结果只对浏览器中不同部分进行数据更新，实现定量数据展示（比如6行/6列等，可根据具体情况裁定），同时计算当前列表的滚动状态，在页面下一帧时将页面元素更新并滚动到对应位置，本发明技术方案可以将每次浏览器页面显示数据、每次页面更新的数据以及读取数据操作次数降到尽可能少，即使在列表数据过大的情况下，由于每次在浏览器页面上显示比浏览器界面数据多一些的数据，对设备资源占用较少，有效避免焦点移动卡顿现象，同时在每次变换时动态预显示、预取和维护当前的显示数据，让用户感知不到页面上实际只有部分数据，本发明还根据现有浏览器的新旧差异设置不同的滚动方式，很好的兼顾了配置低的旧设备和不同浏览器版本的应用，提高应用显示效率和页面流畅度，提升用户的整体体验。
43.虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。