CN112684960A - 前端列表滚动方法、装置、计算机设备及存储介质 - Google Patents
前端列表滚动方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN112684960A CN112684960A CN202011593349.2A CN202011593349A CN112684960A CN 112684960 A CN112684960 A CN 112684960A CN 202011593349 A CN202011593349 A CN 202011593349A CN 112684960 A CN112684960 A CN 112684960A
- Authority
- CN
- China
- Prior art keywords
- list
- scrolling
- rolling
- selector
- coordinate point
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000003860 storage Methods 0.000 title claims abstract description 15
- 238000005096 rolling process Methods 0.000 claims abstract description 154
- 230000001960 triggered effect Effects 0.000 claims abstract description 19
- 238000004904 shortening Methods 0.000 claims abstract description 6
- 238000004590 computer program Methods 0.000 claims description 17
- 238000004364 calculation method Methods 0.000 claims description 13
- 238000009499 grossing Methods 0.000 claims description 9
- 238000005538 encapsulation Methods 0.000 claims description 3
- 238000004806 packaging method and process Methods 0.000 claims description 2
- 230000000694 effects Effects 0.000 abstract description 18
- 238000005516 engineering process Methods 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 10
- 238000007726 management method Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 7
- 238000004458 analytical method Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000002452 interceptive effect Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Abstract
本发明涉及互联网技术领域，尤其涉及一种前端列表滚动方法、装置、计算机设备及存储介质。该前端列表滚动方法包括在web前端界面中加载待触发的列表选择器；当监听到列表选择器的滚动操作结束时，根据起始坐标点和结束坐标点，计算列表选择器的滚动距离；若满足减速滚动的触发条件，则在滚动距离的基础上，按照预设单位步长缩短滚动距离；根据更新后的滚动距离和操作时间，触发列表选择器根据滚动速度进行减速滚动；根据滚动距离和列表行高度，以将列表选择器中与列表索引标识对应的列表行展示在目标选中行中。该方法可有效实现平滑流畅的列表滚动效果。本发明还涉及区块链技术领域，列表选择器还可进一步存储至区块链中。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种前端列表滚动方法、装置、计算机设备及存储介质。
背景技术
目前，安卓或IOS自带的滚轮控件属于本地native开发的应用，当在web端实现列表选择器时，无法将安卓或IOS自带的滚轮控件直接移植到web端进行使用，使得当前web端在采用列表选择器展示列表时，当展示列表过长时，界面空间占有率高。
现有技术中为解决上述问题通过开发web列表选择器的方式，即将列表选择器以滚轮的形式触发显示或隐藏，但在用户触发该列表选择器滚动的操作结束后，由于web端原生页面所监听的滚动事件无法监听滚动数据，导致滚动效果不够平滑流畅，容易出现卡顿。
发明内容
本发明实施例提供一种前端列表滚动方法、装置、计算机设备及存储介质，以解决现有的web端原生页面所监听的滚动事件无法监听滚动数据，导致滚动效果不够平滑流畅，容易出现卡顿的问题。
一种前端列表滚动方法，包括：
在web前端界面中加载待触发的列表选择器；其中，所述列表选择器包括目标选中行；
当监听到所述列表选择器的滚动操作结束时，获取所述滚动操作的操作轨迹和操作时间；其中，所述操作轨迹包括起始坐标点以及结束坐标点；
根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离；
根据所述滚动距离和所述操作时间，判断是否满足减速滚动的触发条件；
若满足，则在所述滚动距离的基础上，按照预设单位步长缩短所述滚动距离，以更新所述滚动距离；
根据更新后的滚动距离和所述操作时间，计算滚动速度，以触发所述列表选择器根据所述滚动速度进行减速滚动。
一种前端列表滚动装置，包括：
组件加载模块，用于在web前端界面中加载待触发的列表选择器；其中，所述列表选择器包括目标选中行；
操作数据获取模块，用于当监听到所述列表选择器的滚动操作结束时，获取所述滚动操作的操作轨迹和操作时间；其中，所述操作轨迹包括起始坐标点以及结束坐标点；
距离计算模块，用于根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离；
条件判断模块，用于根据所述滚动距离和所述操作时间，判断是否满足减速滚动的触发条件；
距离更新模块，用于若满足，则在所述滚动距离的基础上，按照预设单位步长缩短所述滚动距离，以更新所述滚动距离；
减速滚动模块，用于根据更新后的滚动距离和所述操作时间，计算滚动速度，以触发所述列表选择器根据所述滚动速度进行减速滚动。
一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述前端列表滚动方法的步骤
一种计算机存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述前端列表滚动方法的步骤。
上述前端列表滚动方法、装置、计算机设备及存储介质中，通过在监听到列表选择器的滚动操作结束时，根据监听到的滚动距离和操作时间，判断是否满足减速滚动的触发条件，以在满足条件时触发减速滚动，保证容错性操作。然后，根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离，实现在滚动距离的基础上，按照预设单位步长缩短滚动距离，以更新滚动距离，根据更新后的滚动距离和操作时间，计算滚动速度，以触发列表选择器根据滚动速度进行减速滚动，以实现平滑流畅的滚动效果，且可使列表选择器的滚动是根据用户的操作控制，保证终端的控制感，提升交互体验。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一实施例中前端列表滚动方法的一应用环境示意图；
图2是本发明一实施例中前端列表滚动方法的一流程图；
图3是本发明一实施例中前端列表滚动方法的一流程图；
图4是图3中步骤S301的一具体流程图；
图5是本发明一实施例中前端列表滚动方法的一流程图；
图6是图5中步骤S501的一具体流程图；
图7是图2中步骤S203的一具体流程图；
图8是本发明一实施例中前端列表滚动方法的一流程图；
图9是本发明一实施例中前端列表滚动方法的一流程图；
图10是本发明一实施例中前端列表滚动装置的一示意图；
图11是本发明一实施例中计算机设备的一示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本申请的前端列表滚动方法可应用在如图1的应用环境中，其中，计算机设备通过网络与服务器进行通信。计算机设备可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器可以用独立的服务器来实现。
在一实施例中，如图2所示，提供一种前端列表滚动方法，以该方法应用在图1中的服务器为例进行说明，包括如下步骤：
S201：在web前端界面中加载待触发的列表选择器；其中，列表选择器包括目标选中行。
其中，本方法可应用在移动端或PC端中，用于在用户触发该列表选择器滚动的操作结束后，通过监听到的滚动距离和操作时间，实时计算滚动速度，在实现平滑流畅惯性滚动效果的同时，可使列表选择器的滚动是根据用户的操作控制，保证终端的控制感，提升交互体验。
具体地，在实现web端列表选择器时主要是对列表选择器制造滚动效果，使其接近于移动端本地组件中的滚轮控件的使用效果，从而使用户在使用web端应用时，无感知，提升交互体验。该web端列表选择器的实现在初始将通过css定位隐藏于整体组件视图层的底部(也即界面显示区域外)，当通过用户操作满足触发条件时，将其显示在整体组件视图层的顶部，使用户可操作该web端列表选择器。
其中，列表选择器中对应的选择列表可以是时间选择列表，时间包括年、月、日、时、分、秒中的任意一个或多个，也可以是其他类型的选择列表，如省市区的级联列表。该列表选择器包括一目标选中行，该目标选中行即根据用户操作，展示相应的列表行，该目标选中行可通过包括但不限于颜色背景或字体加粗标黑的方式突出显示，使用户直观查看当前所选择的列表行。
需要强调的是，为进一步保证上述列表选择器的私密和安全性，上述列表选择器还可以存储于一区块链的节点中。
S202：当监听到列表选择器的滚动操作结束时，获取滚动操作的操作轨迹和操作时间；其中，操作轨迹包括起始坐标点以及结束坐标点。
其中，操作轨迹包括起始坐标点以及结束坐标点。该起始坐标点用于表示用户开始触摸屏幕或在前端界面中按下鼠标时的起始位置点。该结束坐标点用于表示用户停止触摸屏幕或在前端界面中松开鼠标时的结束位置点。
具体地，在用户操作该列表选择器滚动时，可实时根据用户操作触发该列表选择器滚动，在监听到列表选择器的滚动操作结束时，可获取该列表选择器从开始滚动到结束滚动的操作轨迹和操作时间。
S203：根据起始坐标点和结束坐标点，计算列表选择器的滚动距离。
具体地，通过根据起始坐标点和结束坐标点，计算列表选择器的滚动距离，然后根据该滚动距离和操作时间进行综合分析，以确定是否触发该列表选择器减速滚动，当滚动距离和操作时间均满足条件，则触发列表选择器减速滚动，实现惯性滚动效果的同时，逐渐减速滚动直至停止，以实现与native本地组件应用相同的滚动效果。
S204：根据滚动距离和操作时间，判断是否满足减速滚动的触发条件。
具体地，通过计算起始坐标点和结束坐标点两点之间的直线距离，即滚动距离，以进一步根据滚动距离和操作时间判断是否触发列表选择器减速滚动，即若操作时间不小于预设时间阈值且滚动距离大于预设高度，则触发列表选择器减速滚动。其中，预设时间阈值和根据经验设置，此处不做限定。预设高度可为列表的单行高度的一半，当滚动距离小于该预设高度，则默认该滚轮在随用户操作滚动至用户操作结束时的距离过短，存在误操作的可能性，则不触发列表选择器减速滚动。需要说明的是，该元素预设高度还可为其他自定义高度，此处不做限定。
进一步地，当操作时间不小于预设时间阈值且滚动距离不大于预设高度时，由于存在误操作的可能性，故触发列表选择器回滚至当前行；其中，当前行用于指示未发生滚动时目标选中行对应的列表行。
可以理解地是，当滚动距离较短时，由于减速滚动效果不明显，故无法触发减速滚动，且当操作时间较短时，可认为是用户误操作，因此在该条件下也无法触发减速滚动，保证容错性。
S205：若满足，则在滚动距离的基础上，按照预设单位步长缩短滚动距离，以更新滚动距离。
具体地，本方法在实现列表选择器减速滚动时，是通过不断更新滚动距离，以便根据更新后的滚动距离和操作时间，计算滚动速度，由于操作时间不变，且滚动距离按照预设单位步长缩短，以使列表选择器是以匀变速速的趋势减速滚动，保证平滑效果。其中，预设单位步长可根据实际需要设定，此处不做限定。
可以理解地，该列表选择器在减速滚动过程中的滚动距离是变量，即在用户操作结束时所计算的滚动距离的基础上按照预设单位步长不断缩短，故后续的目标选中行对应的列表索引标识也是不断根据更新后的滚动距离进行实时计算，以实现较平滑的惯性滚动效果，且由于减速滚动是匀减速，故在滚动结束时，可有效控制滚动结束后的最终位置。
具体地，通过计算起始坐标点和结束坐标点两点之间的直线距离，即滚动距离，以进一步根据滚动距离和操作时间判断是否触发列表选择器减速滚动，即若操作时间不小于预设时间阈值且滚动距离大于预设高度，则触发列表选择器减速滚动。其中，预设时间阈值和根据经验设置，此处不做限定。预设高度可为列表的单行高度的一半，当滚动距离小于该预设高度，则默认该滚轮在随用户操作滚动至用户操作结束时的距离过短，存在误操作的可能性，则不触发列表选择器减速滚动。需要说明的是，该元素预设高度还可为其他自定义高度，此处不做限定。
进一步地，当操作时间不小于预设时间阈值且滚动距离不大于预设高度时，由于存在误操作的可能性，故触发列表选择器回滚至当前行；其中，当前行用于指示未发生滚动时目标选中行对应的列表行。
S206：根据更新后的滚动距离和操作时间，计算滚动速度，以触发列表选择器根据滚动速度进行减速滚动。
可以理解地，该列表选择器在减速滚动过程中的滚动距离是变量，即在用户操作结束时所计算的滚动距离的基础上按照预设单位步长不断缩短，以便根据更新后的滚动距离和操作时间，计算滚动速度，以触发列表选择器根据滚动速度进行减速滚动。
具体地，由于故后续的目标选中行对应的列表索引标识是实时根据列表选择器减速滚动过程中不断变化的滚动距离和列表行高度计算得到，以实现在用户操作结束后的惯性滚动效果。
进一步地，本实施例中可通过过CSS的transform属性实现滚动效果，即将滚动方向、不断更新的滚动距离以及滚动速度传入transform属性中，以实现列表选择器滚动的动画效果。
本实施例中，通过在监听到列表选择器的滚动操作结束时，根据监听到的滚动距离和操作时间，判断是否满足减速滚动的触发条件，以在满足条件时触发减速滚动，保证容错性操作。然后，根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离，实现在滚动距离的基础上，按照预设单位步长缩短滚动距离，以更新滚动距离，根据更新后的滚动距离和操作时间，计算滚动速度，以触发列表选择器根据滚动速度进行减速滚动，以实现平滑流畅的滚动效果，且可使列表选择器的滚动是根据用户的操作控制，保证终端的控制感，提升交互体验。
在一实施例中，如图3所示，步骤S206之后，还包括如下步骤：
S301：根据列表选择器减速滚动过程中的滚动距离和列表行高度，计算目标选中行对应的列表索引标识。
S302：将列表选择器中与列表索引标识对应的列表行展示在目标选中行中；其中，列表行高度为列表选择器中每一列表行对应的行高度。
其中，列表行高度为列表选择器中每一列表行对应的行高度，且每一列表行的行高度相同。每一列表行对应一列表索引标识，该列表索引标识用于唯一识别列表行。
具体地，在列表减速滚动的时间内，可根据列表选择器减速滚动的滚动距离和列表行高度，计算目标选中行对应的列表索引标识，即将滚动距离与列表行高度的比值作为列表索引标识，使得减速滚动和列表索引标识的计算并行执行，节省资源。
具体地，当列表选择器减速滚动的时间内，将不断根据减速滚动的滚动距离计算的列表索引标识对应的列表行展示在目标选中行中，还可有效控制滚轮结束后的最终位置。
可以理解地是，用户停止触摸屏幕或在前端界面中松开鼠标时，通过触发减速滚动，可在此减速滚动的时间内，根据减速滚动的滚动距离和列表行高度，实时计算目标选中行对应的列表索引标识，y将列表选择器中与索引值对应的列表行展示在目标选中行中，提升系统性能。
本实施例中，在减速滚动的同时，还会根据列表选择器减速滚动过程中的滚动距离和列表行高度，计算目标选中行对应的列表索引标识，以将列表选择器中与列表索引标识对应的列表行展示在目标选中行中，实现对列表滚动结束后的最终位置的控制。
在一实施例中，如图4所示，S301中，即根据列表选择器减速滚动过程中的滚动距离和列表行高度，计算目标选中行对应的列表索引标识，具体包括如下步骤：
S401：计算滚动距离与列表行高度的比值。
S402：若比值为整型，则将比值作为目标选中行对应的列表索引标识。
S403：若比值为浮点型，则对比值进行取整处理，以得到整型的比值，并将整型的比值作为目标选中行对应的列表索引标识。
可以理解地是，当滚动距离与列表行高度的比值为浮点型时，由于列表行为整型，此时会造成程序的报错无法执行，故为保证程序的顺利执行，需要对该种情况进行对应处理，即对比值进行取整处理，以得到整型比值，并将整型比值作为目标选中行对应的列表索引标识。
其中，取整处理包括但不限于四舍五入、向上取整或向下取整。本实施例中，为进一步保证列表索引标识计算的准确性，通过对比浮点型比值更接近于向上取整的整数还是更接近于向下取整的整数，以将与浮点型比值更接近的整数值作为目标选中行对应的列表索引标识。
示例性，在计算浮点型比值更接近的整数值时，假设浮点型比值为5.3，通计算该浮点型比值与向上取整的整数6的相关性系数，以及该浮点型比值与向下取整的整数7的相关性系数，将相关性系数更接近于1的整数值作为该整型比值。
在一实施例中，如图5所示，该方法还包括如下步骤：
S501：根据起始坐标点与结束坐标点，分析用户操作方向。
S502：当用户操作方向为垂直方向时，根据起始坐标点与结束坐标点的纵坐标差，确定列表选择器的滚动方向。
S503：触发列表选择器在滚动方向上，根据滚动速度进行减速滚动。
具体地，在监听到同防护操作结束时，可根据结束坐标点与起始坐标点的横纵坐标进行滚动方向分析，以确定后续列表选择器减速滚动时的滚动方向。具体地，该滚动方向的判断包括但不限于通过起始坐标点与结束坐标点对应的横坐标差(即结束坐标点的横坐标减去起始坐标点的横坐标)和纵坐标差(即结束坐标点的纵坐标减去起始坐标点的纵坐标)，若横坐标差小于纵坐标差，则触摸整体动作趋势是在垂直方向，判断出垂直方向后，再通过进一步判断起始坐标点和纵坐标点之间的差值是否大于零，若大于零则证明用户操作手势是由上至下，则滚轮需要向下滚动。若小于零，则证明用户操作手势是由下至上，则滚轮需要向上滚动。
在一实施例中，如图6所示，步骤S501中，即根据起始坐标点与结束坐标点，分析用户操作方向，具体包括如下步骤：
S601：计算起始坐标点与结束坐标点的横坐标差，以及起始坐标点与结束坐标点的纵坐标差。
S602：当横坐标差的绝对值大于纵坐标差的绝对值时，确定用户操作方向为水平方向。
S603：当横坐标差的绝对值不大于纵坐标差的绝对值时，确定用户操作方向为垂直方向。
具体地，在判断用户操作方向时，需要通过横轴和纵轴的偏移量进一步判断操作的整体运动趋势，故此处需要比对横坐标差与述纵坐标差的绝对，当横坐标差的绝对值大于纵坐标差的绝对值时，认为横轴的偏移量大于纵轴的偏移量，则确定用户操作方向为水平方向；当横坐标差的绝对值不大于纵坐标差的绝对值时，认为纵轴的偏移量大于横轴的偏移量，则确定用户操作方向为垂直方向。
示例性地，假设起始坐标点为(1，5)和结束坐标点(0，-4)，横坐标差即为-1，纵坐标差即为-9，此时纵轴的偏移量大于横轴的偏移量，故确定用户操作方向为垂直方向。
在一实施例中，如图7所示，步骤S204中，即根据滚动距离和操作时间，判断是否满足减速滚动的触发条件，具体包括如下步骤：
S701：计算起始坐标点和结束坐标点之间的直线距离。
具体地，可通过两点间距离公式即，
计算该起始坐标点和结束坐标点之间的直线距离。其中，C(x1,x2)表示起始坐标点，D(y1,y2)表示结束坐标点。
S702：对直线距离进行平滑处理，得到列表选择器的滚动距离。
具体地，为了保证滚动效果的平滑性，可在计算出起始坐标点和结束坐标点之间的直线距离后，进一步对直线距离进行平滑处理，得到列表选择器的滚动距离。
其中，平滑处理可通过将该直线距离通过预设平滑因子(例如0.002)进行修正，以得到列表选择器的滚动距离。该预设平滑因子可根据实际情况设定，此处不做限定。
具体地，可通过如下计算公式计算滚动距离，S＝A/B，其中，S表示滚动距离，A表示直线距离，B表示预设平滑因子。
在一实施例中，如图8所示，步骤S201之前，该前端列表滚动方法还包括如下步骤：
S801：获取预开发的列表选择器，并采用不同类型框架对列表选择器进行封装。
S802：将封装后的不同框架类型对应的列表选择器上传至第三方管理平台中
S803：获取web前端界面的框架类型。
S804：在web前端界面中，通过第三方管理平台引入与框架类型对应的列表选择器。
本实施例中，通过获取预开发的列表选择，并采用不同类型框架对列表选择器进行封装，以将封装后的不同框架类型对应的列表选择器上传至第三方管理平台中，以便后续根据用户所需的web前端界面的框架类型，执行资源下载命令，通过第三方管理平台(即JavaScript的包管理工具，npm)引入与框架类型对应的列表选择器，以将其引入至web前端界面中，实现按需引入，无需像引用主流框架时需要全量下载组件库，再引入所需组件。
具体地，可采用包括但不限于Vue框架或React框架对列表选择器进行封装，以将封装后的不同框架类型对应的列表选择器上传至第三方管理平台中。
可以理解地，本实施例中的可滚动的选择器还对应有对应的配置文件，该配置文件中包括多个可配置项，在从NPM平台下载组件资源时，还可下载对应的配置文件，以便用户根据实际页面的不同样式需求或显示数据进行适应性修改，实现定制化。
进一步地，在过第三方管理平台引入与框架类型对应的列表选择器以及对应的样式配置文件之后，还包括：
S901：接收样式配置指令；其中，样式配置指令包括待配置样式模块以及对应的配置变量值。
S902：根据配置变量值，对样式配置文件中与待配置样式模块对应的属性变量进行替换，以更新样式配置文件。
S903：在web前端界面中按照更新后的样式配置文件显示列表选择器。
具体地，通过接收样式配置指令，以便根据配置变量值，对样式配置文件中与待配置样式模块对应的属性变量进行替换，更新样式配置文件，以在web前端界面中按照更新后的样式配置文件显示列表选择器，实现组件定制化。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
在一实施例中，提供一种前端列表滚动装置，该前端列表滚动装置与上述实施例中前端列表滚动方法一一对应。如图10所示，该前端列表滚动装置包括组件加载模块10、操作数据获取模块20、距离计算模块30、条件判断模块40、距离更新模块50以及减速滚动模块60。各功能模块详细说明如下：
组件加载模块10，用于在web前端界面中加载待触发的列表选择器；其中，列表选择器包括目标选中行。
操作数据获取模块20，用于当监听到列表选择器的滚动操作结束时，获取滚动操作的操作轨迹和操作时间；其中，操作轨迹包括起始坐标点以及结束坐标点。
距离计算模块30，用于根据起始坐标点和结束坐标点，计算列表选择器的滚动距离。
条件判断模块40，用于根据滚动距离和操作时间，判断是否满足减速滚动的触发条件。
距离更新模块50，用于若满足，则在滚动距离的基础上，按照预设单位步长缩短滚动距离，以更新滚动距离。
减速滚动模块60，用于根据更新后的滚动距离和操作时间，计算滚动速度，以触发列表选择器根据滚动速度进行减速滚动。
具体地，该前端列表滚动装置还包括索引标识计算模块和展示模块。
索引标识计算模块，用于根据列表选择器减速滚动过程中的滚动距离和列表行高度，计算目标选中行对应的列表索引标识。
展示模块，用于将列表选择器中与列表索引标识对应的列表行展示在目标选中行中；其中，列表行高度为列表选择器中每一列表行对应的行高度。
具体地，该展示模块包括比值计算单元、第一处理单元以及第二处理单元。
比值计算单元，用于计算滚动距离与列表行高度的比值。
第一处理单元，用于若比值为整型，则将比值作为目标选中行对应的列表索引标识。
第二处理单元，用于若比值为浮点型，则对比值进行取整处理，以得到整型的比值，并将整型的比值作为目标选中行对应的列表索引标识。
具体地，该前端列表滚动装置还包括方向分析模块、第一方向确定模块、第二方向确定模块和减速滚动模块。
方向分析模块，用于根据起始坐标点与结束坐标点，分析用户操作方向。
第一方向确定模块，用于当用户操作方向为垂直方向时，根据起始坐标点与结束坐标点的纵坐标差，确定列表选择器的滚动方向。
第二方向确定模块，当用户操作方向为垂直方向时，根据起始坐标点与结束坐标点的横坐标差，确定列表选择器的滚动方向。
减速滚动模块，用于触发列表选择器在滚动方向上，根据滚动速度进行减速滚动。
具体地，方向分析模块包括坐标计算单元、水平方向确定单元以及垂直方向确定单元。
坐标计算单元，用于计算起始坐标点与结束坐标点的横坐标差，以及起始坐标点与结束坐标点的纵坐标差。
水平方向确定单元，用于当横坐标差的绝对值大于纵坐标差的绝对值时，确定用户操作方向为水平方向。
垂直方向确定单元，用于当横坐标差的绝对值不大于纵坐标差的绝对值时，确定用户操作方向为垂直方向。
具体地，该距离计算模块包括直线距离计算单元以及平滑处理单元。
直线距离计算单元，用于计算起始坐标点和结束坐标点之间的直线距离。
平滑处理单元，用于对直线距离进行平滑处理，得到列表选择器的滚动距离。
具体地，该前端列表滚动装置还包括组件上传模块、框架类型获取模块、组件上传模块以及组件引入模块。
组件上传模块，用于获取预开发的列表选择器，并采用不同类型框架对列表选择器进行封装。
组件上传模块，用于将封装后的不同框架类型对应的列表选择器上传至第三方管理平台中。
框架类型获取模块，用于获取web前端界面的框架类型。
组件引入模块，用于在web前端界面中，通过第三方管理平台引入与框架类型对应的列表选择器。
具体地，该前端列表滚动装置还包括样式配置指令接收模块、样式配置模块以及显示模块。
样式配置指令接收模块，用于接收样式配置指令；其中，样式配置指令包括待配置样式模块以及对应的配置变量值。
样式配置模块，用于根据配置变量值，对样式配置文件中与待配置样式模块对应的属性变量进行替换，以更新样式配置文件。
显示模块，用于在web前端界面中按照更新后的样式配置文件显示列表选择器。
关于前端列表滚动装置的具体限定可以参见上文中对于前端列表滚动方法的限定，在此不再赘述。上述前端列表滚动装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括计算机存储介质、内存储器。该计算机存储介质存储有操作系统、计算机程序和数据库。该内存储器为计算机存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储执行前端列表滚动方法过程中生成或获取的数据，如列表选择器。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种前端列表滚动方法。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中的前端列表滚动方法的步骤，例如图2所示的步骤S201-S206或者图3至图9中所示的步骤。或者，处理器执行计算机程序时实现前端列表滚动装置这一实施例中的各模块/单元的功能，例如图10所示的各模块/单元的功能，为避免重复，这里不再赘述。
在一实施例中，提供一计算机存储介质，该计算机存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中前端列表滚动方法的步骤，例如图2所示的步骤S201-S206，或者图3至图9中所示的步骤，为避免重复，这里不再赘述。或者，该计算机程序被处理器执行时实现上述前端列表滚动装置这一实施例中的各模块/单元的功能，例如图10所示的各模块/单元的功能，为避免重复，这里不再赘述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将前端列表滚动装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上实施例仅用以说明本发明的技术方案，而非对其限制，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。
Claims (10)
1.一种前端列表滚动方法，其特征在于，包括：
在web前端界面中加载待触发的列表选择器；其中，所述列表选择器包括目标选中行；
当监听到所述列表选择器的滚动操作结束时，获取所述滚动操作的操作轨迹和操作时间；其中，所述操作轨迹包括起始坐标点以及结束坐标点；
根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离；
根据所述滚动距离和所述操作时间，判断是否满足减速滚动的触发条件；
若满足，则在所述滚动距离的基础上，按照预设单位步长缩短所述滚动距离，以更新所述滚动距离；
根据更新后的滚动距离和所述操作时间，计算滚动速度，以触发所述列表选择器根据所述滚动速度进行减速滚动。
2.如权利要求1所述前端列表滚动方法，其特征在于，根据更新后的滚动距离和所述操作时间，计算滚动速度，以触发所述列表选择器根据所述滚动速度进行减速滚动之后，所述前端列表滚动方法还包括：
根据所述列表选择器减速滚动过程中的滚动距离和列表行高度，计算列表索引标识；
将所述列表选择器中与所述列表索引标识对应的列表行展示在所述目标选中行中；其中，所述列表行高度为所述列表选择器中每一列表行对应的行高度。
3.如权利要求2所述前端列表滚动方法，其特征在于，所述根据所述列表选择器减速滚动过程中的滚动距离和列表行高度，计算列表索引标识，包括：
计算所述滚动距离与所述列表行高度的比值；
若所述比值为整型，则将所述比值作为所述列表索引标识；
若所述比值为浮点型，则对所述比值进行取整处理，以得到整型的比值，并将所述整型的比值作为所述列表索引标识。
4.如权利要求1所述前端列表滚动方法，其特征在于，在所述触发所述列表选择器根据所述滚动速度进行减速滚动之前，所述前端列表滚动方法还包括：
根据所述起始坐标点与所述结束坐标点，分析用户操作方向；
当所述用户操作方向为垂直方向时，根据所述起始坐标点与结束坐标点的纵坐标差，确定所述列表选择器的滚动方向；
当所述用户操作方向为垂直方向时，根据所述起始坐标点与结束坐标点的横坐标差，确定所述列表选择器的滚动方向；
所述触发所述列表选择器根据所述滚动速度进行减速滚动，包括：
触发所述列表选择器在所述滚动方向上，根据所述滚动速度进行减速滚动。
5.如权利要求4所述前端列表滚动方法，其特征在于，所述根据所述起始坐标点与所述结束坐标点，分析用户操作方向，包括：
计算所述起始坐标点与所述结束坐标点的横坐标差，以及所述起始坐标点与所述结束坐标点的纵坐标差；
当所述横坐标差的绝对值大于所述纵坐标差的绝对值时，确定所述用户操作方向为水平方向；
当所述横坐标差的绝对值不大于所述纵坐标差的绝对值时，确定所述用户操作方向为垂直方向。
6.如权利要求1所述前端列表滚动方法，其特征在于，所述根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离，包括：
计算所述所述起始坐标点和所述结束坐标点之间的直线距离；
对所述直线距离进行平滑处理，得到所述列表选择器的滚动距离。
7.如权利要求1所述前端列表滚动方法，其特征在于，在所述加载web前端界面之前，所述前端列表滚动方法还包括：
获取预开发的列表选择器，并采用不同类型框架对所述列表选择器进行封装；
将封装后的不同框架类型对应的列表选择器上传至第三方管理平台中；
获取所述web前端界面的框架类型；
在所述web前端界面中，通过所述第三方管理平台引入与所述框架类型对应的所述列表选择器。
8.一种前端列表滚动装置，其特征在于，包括：
组件加载模块，用于在web前端界面中加载待触发的列表选择器；其中，所述列表选择器包括目标选中行；
操作数据获取模块，用于当监听到所述列表选择器的滚动操作结束时，获取所述滚动操作的操作轨迹和操作时间；其中，所述操作轨迹包括起始坐标点以及结束坐标点；
距离计算模块，用于根据所述起始坐标点与所述结束坐标点，计算所述列表选择器的滚动距离；
条件判断模块，用于根据所述滚动距离和所述操作时间，判断是否满足减速滚动的触发条件；
距离更新模块，用于若满足，则在所述滚动距离的基础上，按照预设单位步长缩短所述滚动距离，以更新所述滚动距离；
减速滚动模块，用于根据更新后的滚动距离和所述操作时间，计算滚动速度，以触发所述列表选择器根据所述滚动速度进行减速滚动。
9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述前端列表滚动方法的步骤。
10.一种计算机存储介质，所述计算机存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述前端列表滚动方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011593349.2A CN112684960A (zh) | 2020-12-29 | 2020-12-29 | 前端列表滚动方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011593349.2A CN112684960A (zh) | 2020-12-29 | 2020-12-29 | 前端列表滚动方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112684960A true CN112684960A (zh) | 2021-04-20 |
Family
ID=75455065
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011593349.2A Pending CN112684960A (zh) | 2020-12-29 | 2020-12-29 | 前端列表滚动方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112684960A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115098006A (zh) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 |
| CN116088997A (zh) * | 2023-04-07 | 2023-05-09 | 深圳市微克科技有限公司 | 一种页面滚动显示方法、装置、存储介质和电子设备 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060075358A1 (en) * | 2004-10-01 | 2006-04-06 | Nokia Corporation | Scrolling items on a list |
| US20090106687A1 (en) * | 2007-10-19 | 2009-04-23 | Microsoft Corporation | Dynamically updated virtual list view |
| US20110072388A1 (en) * | 2009-09-23 | 2011-03-24 | Thomas Merrell | Method and Apparatus for Altering the Presentation Data Based Upon Displacement and Duration of Contact |
| US8504940B1 (en) * | 2011-10-03 | 2013-08-06 | Google Inc. | Smooth hardware accelerated scrolling |
| KR20140110452A (ko) * | 2013-03-08 | 2014-09-17 | 삼성전자주식회사 | 전자장치에서 근접 터치를 이용한 사용자 인터페이스 제어 방법 및 장치 |
| CN105308550A (zh) * | 2013-06-17 | 2016-02-03 | 日立麦克赛尔株式会社 | 信息显示终端 |
| CN107817938A (zh) * | 2017-11-23 | 2018-03-20 | 平安科技（深圳）有限公司 | 实现选择列表滚动的方法、装置、设备及可读存储介质 |
| CN109669740A (zh) * | 2018-09-25 | 2019-04-23 | 平安科技（深圳）有限公司 | 列表加载方法、装置、设备及计算机可读存储介质 |
| CN110472168A (zh) * | 2019-07-05 | 2019-11-19 | 中国平安财产保险股份有限公司 | 页面数据更新方法、装置、计算机设备及存储介质 |
| CN111857486A (zh) * | 2019-04-24 | 2020-10-30 | 北京京东尚科信息技术有限公司 | 列表的处理方法、装置、设备和存储介质 |
-
2020
- 2020-12-29 CN CN202011593349.2A patent/CN112684960A/zh active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060075358A1 (en) * | 2004-10-01 | 2006-04-06 | Nokia Corporation | Scrolling items on a list |
| US20090106687A1 (en) * | 2007-10-19 | 2009-04-23 | Microsoft Corporation | Dynamically updated virtual list view |
| US20110072388A1 (en) * | 2009-09-23 | 2011-03-24 | Thomas Merrell | Method and Apparatus for Altering the Presentation Data Based Upon Displacement and Duration of Contact |
| US8504940B1 (en) * | 2011-10-03 | 2013-08-06 | Google Inc. | Smooth hardware accelerated scrolling |
| KR20140110452A (ko) * | 2013-03-08 | 2014-09-17 | 삼성전자주식회사 | 전자장치에서 근접 터치를 이용한 사용자 인터페이스 제어 방법 및 장치 |
| CN105308550A (zh) * | 2013-06-17 | 2016-02-03 | 日立麦克赛尔株式会社 | 信息显示终端 |
| CN107817938A (zh) * | 2017-11-23 | 2018-03-20 | 平安科技（深圳）有限公司 | 实现选择列表滚动的方法、装置、设备及可读存储介质 |
| CN109669740A (zh) * | 2018-09-25 | 2019-04-23 | 平安科技（深圳）有限公司 | 列表加载方法、装置、设备及计算机可读存储介质 |
| CN111857486A (zh) * | 2019-04-24 | 2020-10-30 | 北京京东尚科信息技术有限公司 | 列表的处理方法、装置、设备和存储介质 |
| CN110472168A (zh) * | 2019-07-05 | 2019-11-19 | 中国平安财产保险股份有限公司 | 页面数据更新方法、装置、计算机设备及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| 王珏辉;: "基于响应式设计模式的Web前端开发研究", 电脑编程技巧与维护, no. 04, 18 April 2019 (2019-04-18) * |
| 阿龙;: "鼠标滚轮随手而动", 电脑知识与技术(经验技巧), no. 06, 5 June 2012 (2012-06-05) * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115098006A (zh) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 |
| CN116088997A (zh) * | 2023-04-07 | 2023-05-09 | 深圳市微克科技有限公司 | 一种页面滚动显示方法、装置、存储介质和电子设备 |
| CN116088997B (zh) * | 2023-04-07 | 2023-07-21 | 深圳市微克科技有限公司 | 一种页面滚动显示方法、装置、存储介质和电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110675728B (zh) | 热力图的生成方法、装置、设备及计算机可读存储介质 | |
| CN112684960A (zh) | 前端列表滚动方法、装置、计算机设备及存储介质 | |
| CN108376094B (zh) | 通知消息显示方法、装置、计算机设备和存储介质 | |
| CN112114913B (zh) | 应用程序的界面更新方法、装置、计算机设备和存储介质 | |
| CN109215486B (zh) | 电子地图标注及显示方法、装置、终端设备及存储介质 | |
| CN110659092B (zh) | 网页截图方法、装置、计算机设备和存储介质 | |
| AU2019457052A1 (en) | Table processing method and apparatus, and intelligent interactive tablet and storage medium | |
| US20110173550A1 (en) | Data driven user interface animation | |
| CN106484424A (zh) | 一种获得与屏幕适配的控件的方法和系统 | |
| CN112631698A (zh) | 数据显示方法、装置、计算机设备及存储介质 | |
| CN111698548B (zh) | 一种视频播放方法及装置 | |
| JP5866085B1 (ja) | ユーザインタフェース装置およびユーザインタフェース装置の画面表示方法 | |
| CN113259742A (zh) | 视频弹幕显示方法、装置、可读存储介质和计算机设备 | |
| CN112230816B (zh) | 高效率截图方法、装置、计算机设备和存储介质 | |
| CN110968241B (zh) | 电子表格的处理方法、装置、计算机可以读存储介质和计算机设备 | |
| CN111190574B (zh) | 多级联动组件的选项选择方法、装置、设备和存储介质 | |
| CN110046051B (zh) | 控制方法、装置、客户端及电子设备 | |
| CN112000259A (zh) | 一种基于移动终端触摸事件控制摄像头的方法及装置 | |
| CN114518815B (zh) | 建筑图纸的显示方法、装置、设备、介质及程序产品 | |
| US20140317538A1 (en) | User interface response to an asynchronous manipulation | |
| CN111813408A (zh) | 视图显示处理方法、装置、终端设备及存储介质 | |
| CN115047996A (zh) | 数据处理方法、装置、电子设备及存储介质 | |
| CN114579031B (zh) | 滑动操作的响应方法、装置、服务器及存储介质 | |
| CN113448579B (zh) | 一种在可视化界面中实现边动效的方法及装置 | |
| CN112882635A (zh) | 流程数据处理方法、装置、计算机设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |