[发明专利]列表自动翻页轮播组件实现方法及装置、设备、介质在审
申请号: | 202010187356.6 | 申请日: | 2020-03-17 |
公开(公告)号: | CN111427574A | 公开(公告)日: | 2020-07-17 |
发明(设计)人: | 林小玲;吴闽华;姜坤;卫宣安 | 申请(专利权)人: | 深圳市震有软件科技有限公司 |
主分类号: | G06F8/38 | 分类号: | G06F8/38;G06F8/71;G06F3/0482 |
代理公司: | 深圳市君胜知识产权代理事务所(普通合伙) 44268 | 代理人: | 朱阳波;吴志益 |
地址: | 518057 广东省深圳市南山区粤海街*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 列表 自动 翻页 组件 实现 方法 装置 设备 介质 | ||
1.一种基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述方法包括:
自定义一轮播组件,采用vue框架封装轮播组件,将轮播组件封装为可在多个页面引用并可自动翻页的自动翻页轮播组件;
通过vue框架引用封装好的自动翻页轮播组件,在父组件中配置需要显示内容的列表数据,以及配置在一定时间内自动翻页轮播每一行数据,形成配置数据;
自动翻页轮播组件,根据所述配置数据,自动翻页轮播数据;
当轮播高亮选中到最后一项时,自动翻页,又开始自动高亮选中下一页的数据项。
2.根据权利要求1所述基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述自定义一轮播组件,采用vue框架封装轮播组件,将轮播组件封装为可在多个页面引用并可自动翻页的自动翻页轮播组件的步骤包括:
自定义一轮播组件,采用vue框架封装轮播组件;
封装轮播组件可在多个页面引用,并在在轮播高亮选中某一项数据时,可弹出详情框或交互界面;以及可自动翻页,成为的自动翻页轮播组件。
3.根据权利要求1所述基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述通过vue框架引用封装好的自动翻页轮播组件,在父组件中配置需要显示内容的列表数据,以及配置在一定时间内自动翻页轮播每一行数据,形成配置数据的步骤包括:
通过vue框架引用封装好的自动翻页轮播组件;
在父组件中配置需要显示内容的列表数据,包括:配置表头数据,配置内容字体颜色和大小;配置每一页显示的行数,配置轮播高亮选中每一项的时间,配置轮播高亮到最后一项时,切换到下一页的时间;配置达到在一定时间内自动翻页轮播每一行数据;形成配置数据。
4.根据权利要求1所述基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述在父组件中配置需要显示内容的列表数据,形成配置数据的步骤包括:
配置表头数据;
配置表头高度、字体颜色和大小;
配置内容字体颜色和大小;配置每一页显示的行数;
配置轮播高亮的颜色;
以及配置轮播每一项的时间;
生成配置数据。
5.根据权利要求1所述基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述自动翻页轮播组件,根据所述配置数据,自动翻页轮播数据的步骤包括:
根据表头配置数据生成表头要显示的文本;
根据每页在显示的行数分组;
根据每页要显示的行数和配置的数据进行分组;
根据轮播每一行数据的时间生成定时器;
当轮播时间已到,则当前轮播显示设置为下一行。
6.根据权利要求1所述基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述自动翻页轮播组件,根据所述配置数据,自动翻页轮播数据的步骤还包括:
当轮播高亮选中某一项数据时,控制弹出详情框或者交互界面,并同时控制不移除一项数据。
7.根据权利要求1所述基于vue的列表自动翻页轮播组件实现方法,其特征在于,所述当轮播高亮选中到最后一项时,自动翻页,又开始自动高亮选中下一页的数据项的步骤包括;
判断是否到了最后一行数据;
当轮播高亮选中到最后一项时,自动切换下一页,重新开始自动高亮选中下一页的数据项。
8.一种基于vue的列表自动翻页轮播组件实现装置,其特征在于,所述装置包括:
封装模块,用于自定义一轮播组件,采用vue框架封装轮播组件,将轮播组件封装为可在多个页面引用并可自动翻页的自动翻页轮播组件;
配置模块,用于通过vue框架引用封装好的自动翻页轮播组件,在父组件中配置需要显示内容的列表数据,以及配置在一定时间内自动翻页轮播每一行数据,形成配置数据;
自动轮播控制模块,用于控制自动翻页轮播组件,根据所述配置数据,自动翻页轮播数据;
翻页控制模块,用于当轮播高亮选中到最后一项时,自动翻页,又开始自动高亮选中下一页的数据项。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于深圳市震有软件科技有限公司,未经深圳市震有软件科技有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/202010187356.6/1.html,转载请声明来源钻瓜专利网。