[发明专利]前端列表滚动方法、装置、计算机设备及存储介质在审
申请号: | 202011593349.2 | 申请日: | 2020-12-29 |
公开(公告)号: | CN112684960A | 公开(公告)日: | 2021-04-20 |
发明(设计)人: | 潘炌炘 | 申请(专利权)人: | 平安普惠企业管理有限公司 |
主分类号: | G06F3/0482 | 分类号: | G06F3/0482;G06F9/451;G06F9/445;G06F16/957 |
代理公司: | 深圳国新南方知识产权代理有限公司 44374 | 代理人: | 原明云 |
地址: | 518000 广东省深圳市前海深港合作区前*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 前端 列表 滚动 方法 装置 计算机 设备 存储 介质 | ||
1.一种前端列表滚动方法,其特征在于,包括:
在web前端界面中加载待触发的列表选择器;其中,所述列表选择器包括目标选中行;
当监听到所述列表选择器的滚动操作结束时,获取所述滚动操作的操作轨迹和操作时间;其中,所述操作轨迹包括起始坐标点以及结束坐标点;
根据所述起始坐标点与所述结束坐标点,计算所述列表选择器的滚动距离;
根据所述滚动距离和所述操作时间,判断是否满足减速滚动的触发条件;
若满足,则在所述滚动距离的基础上,按照预设单位步长缩短所述滚动距离,以更新所述滚动距离;
根据更新后的滚动距离和所述操作时间,计算滚动速度,以触发所述列表选择器根据所述滚动速度进行减速滚动。
2.如权利要求1所述前端列表滚动方法,其特征在于,根据更新后的滚动距离和所述操作时间,计算滚动速度,以触发所述列表选择器根据所述滚动速度进行减速滚动之后,所述前端列表滚动方法还包括:
根据所述列表选择器减速滚动过程中的滚动距离和列表行高度,计算列表索引标识;
将所述列表选择器中与所述列表索引标识对应的列表行展示在所述目标选中行中;其中,所述列表行高度为所述列表选择器中每一列表行对应的行高度。
3.如权利要求2所述前端列表滚动方法,其特征在于,所述根据所述列表选择器减速滚动过程中的滚动距离和列表行高度,计算列表索引标识,包括:
计算所述滚动距离与所述列表行高度的比值;
若所述比值为整型,则将所述比值作为所述列表索引标识;
若所述比值为浮点型,则对所述比值进行取整处理,以得到整型的比值,并将所述整型的比值作为所述列表索引标识。
4.如权利要求1所述前端列表滚动方法,其特征在于,在所述触发所述列表选择器根据所述滚动速度进行减速滚动之前,所述前端列表滚动方法还包括:
根据所述起始坐标点与所述结束坐标点,分析用户操作方向;
当所述用户操作方向为垂直方向时,根据所述起始坐标点与结束坐标点的纵坐标差,确定所述列表选择器的滚动方向;
当所述用户操作方向为垂直方向时,根据所述起始坐标点与结束坐标点的横坐标差,确定所述列表选择器的滚动方向;
所述触发所述列表选择器根据所述滚动速度进行减速滚动,包括:
触发所述列表选择器在所述滚动方向上,根据所述滚动速度进行减速滚动。
5.如权利要求4所述前端列表滚动方法,其特征在于,所述根据所述起始坐标点与所述结束坐标点,分析用户操作方向,包括:
计算所述起始坐标点与所述结束坐标点的横坐标差,以及所述起始坐标点与所述结束坐标点的纵坐标差;
当所述横坐标差的绝对值大于所述纵坐标差的绝对值时,确定所述用户操作方向为水平方向;
当所述横坐标差的绝对值不大于所述纵坐标差的绝对值时,确定所述用户操作方向为垂直方向。
6.如权利要求1所述前端列表滚动方法,其特征在于,所述根据所述起始坐标点与所述结束坐标点,计算所述列表选择器的滚动距离,包括:
计算所述所述起始坐标点和所述结束坐标点之间的直线距离;
对所述直线距离进行平滑处理,得到所述列表选择器的滚动距离。
7.如权利要求1所述前端列表滚动方法,其特征在于,在所述加载web前端界面之前,所述前端列表滚动方法还包括:
获取预开发的列表选择器,并采用不同类型框架对所述列表选择器进行封装;
将封装后的不同框架类型对应的列表选择器上传至第三方管理平台中;
获取所述web前端界面的框架类型;
在所述web前端界面中,通过所述第三方管理平台引入与所述框架类型对应的所述列表选择器。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于平安普惠企业管理有限公司,未经平安普惠企业管理有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/202011593349.2/1.html,转载请声明来源钻瓜专利网。
- 上一篇:信息显示方法、装置、设备及存储介质
- 下一篇:电梯井道外墙安装结构及安装方法