CN111104114B - 自带状态的可控制轮播图组件实现方法及***、设备 - Google Patents
自带状态的可控制轮播图组件实现方法及***、设备 Download PDFInfo
- Publication number
- CN111104114B CN111104114B CN201911266143.6A CN201911266143A CN111104114B CN 111104114 B CN111104114 B CN 111104114B CN 201911266143 A CN201911266143 A CN 201911266143A CN 111104114 B CN111104114 B CN 111104114B
- Authority
- CN
- China
- Prior art keywords
- carousel
- component
- icon
- state
- automatic
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000010586 diagram Methods 0.000 claims abstract description 50
- 238000004590 computer program Methods 0.000 claims description 12
- 238000004806 packaging method and process Methods 0.000 claims description 2
- 230000000694 effects Effects 0.000 description 7
- 230000004048 modification Effects 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 239000000463 material Substances 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000015556 catabolic process Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000037361 pathway Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请涉及自带状态的可控制轮播图组件实现方法及***、计算机设备，方法包括：在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；添加鼠标触发事件用来控制轮播图是否自动轮播；根据配置文件中各种属性配置轮播图；根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。本申请通过给轮播图添加一个状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换，方便用户清楚的看到轮播的状态，通过添加鼠标触发事件来控制轮播图是否自动轮播，解决通过添加按钮控制使得界面过于繁琐的问题。
Description
技术领域
本申请涉及前端界面处理技术领域，特别是涉及一种自带状态的可控制轮播图组件实现方法及***、计算机设备、可读存储介质。
背景技术
随着科技的发展，对于前端界面效果的要求也越来越高，现有技术中公开的开源或者不开源的轮播图组件都是自动轮播的，或者是手动进行切换的，再或者就是添加按钮来控制轮播。
现有技术的轮播图组件界面过于繁琐，而且轮播时间间隔过于长的情况下，无法判断轮播图是否为自动轮播。
因此，现有技术有待改进。
发明内容
本发明要解决的技术问题是，提供一种自带状态的可控制轮播图组件实现方法及***、计算机设备、可读存储介质，本申请通过给轮播图添加一个状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换，方便用户清楚的看到轮播的状态。除此之外，通过添加鼠标触发事件来控制轮播图是否自动轮播，解决通过添加按钮控制使得界面过于繁琐的问题。
一种自带状态的可控制轮播图组件实现方法，其中，所述方法包括：
采用vue框架引用封装好的轮播图组件；
在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；
在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。
所述自带状态的可控制轮播图组件实现方法，其中，所述采用vue框架引用封装好的轮播图组件的步骤之前还包括：
设置配置文件，设置有需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给轮播图组件。
所述自带状态的可控制轮播图组件实现方法，其中，所述采用vue框架引用封装好的轮播图组件的步骤包括：
采用vue框架封装轮播图组件；
采用vue框架引用封装好的轮播图组件。
所述自带状态的可控制轮播图组件实现方法，其中，所述根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向的步骤包括：
根据配置文件中各种属性、配置轮播图组件是否自动轮播；
配置自动轮播时间间隔；
配置当前轮播图组件可显示的项数；
配置轮播方向。
所述自带状态的可控制轮播图组件实现方法，其中，所述在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换的步骤包括：
设置鼠标选中时停止自动轮播，状态为右上角标记为灰色，代表停止自动轮播，可进行手动切换；设置鼠标取消选中时，状态为右上角标记为闪动的白色动画。
所述自带状态的可控制轮播图组件实现方法，其中，所述在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播的步骤包括：
设置鼠标点击选中时停止自动轮播，鼠标再次点击取消选中。
一种自带状态的可控制轮播图组件实现***，其中，所述***包括：
封装模块，用于采用vue框架引用封装好的轮播图组件；
状态图标添加模块，用于在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；
鼠标触发事件添加模块，用于在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
配置模块，用于根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
轮播图呈现模块，用于根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
轮播切换模块，用于当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。
所述的自带状态的可控制轮播图组件实现***，其中，还包括：
配置文件设置模块，用于设置配置文件，设置有需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给轮播图组件。
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其中，所述处理器执行所述计算机程序时实现任一项所述自带状态的可控制轮播图组件实现方法的步骤。
一种计算机可读存储介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现任一项所述自带状态的可控制轮播图组件实现方法的步骤。
与现有技术相比，本发明实施例具有以下优点：
本发明实施方式提供一种一带状态的可控制轮播图组件实现方法及***、计算机设备、可读存储介质；采用vue框架封装轮播图组件，集合第三方开源的轮播图组件代码，实现轮播图的呈现，满足基本的轮播功能。根据配置文件中各种属性可以配置轮播图是否自动轮播(autoplay)、自动轮播切换时间间隔(delay)、当前容器可以显示几项(slidesPerView)、轮播方向(direction)等；配置文件一方面满足不同人员与对于轮播图属性的修改，另一方面方便一些非开发人员进行轮播图样式的配置修改。本申请在配置文件，有需要配置的属性以及属性的注释。使用vue组件方式，数据由父组件传递参数给轮播图组件。通过鼠标点击事件来控制轮播图自动轮播，代替原有的添加按钮来控制轮播图轮播的方式，既简化界面，又方便用户进行操作；与此同时，轮播图右上角添加状态图标，直接明了的告知用户当前轮播图的轮播状态，避免用户进行不必要的操作，浪费时间，提高了操作效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例中一种自带状态的可控制轮播图组件实现方法的流程示意图。
图2为本发明实施例中一种自带状态的可控制轮播图组件实现方法的配置文件以及说明示意图。
图3为本发明实施例中一种自带状态的可控制轮播图组件实现方法的发生鼠标触发事件的手动切换状态结构示意图。
图4为本发明实施例中一种自带状态的可控制轮播图组件实现方法的发生鼠标触发事件的自动轮播状态结构示意图。
图5为本发明实施例中一种自带状态的可控制轮播图组件实现方法的具体应用实施例流程示意图。
图6为本发明实施例中一种自带状态的可控制轮播图组件实现***的结构示意图。
图7为本发明实施例中计算机设备的内部结构图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
发明人经过研究发现，现有技术的动态路网的实现难度大，面临两个问题:1.完全不具备可用性，仅依靠CPU在并行计算方面孱弱的性能和第三方库结合开发的动态路网，运行效率极低。为实现这种效果，导致内存膨胀以及运行帧率严重下降，没有有效利用图形学方法和3D加速器GPU的优势。2.具备一定可用性，性能达标，但其实现依赖于特定的第三方库，实现效果较为死板大部分属性无法配置，也很难与现有***进行结合。
为了解决上述问题，在本发明实施例中，一种自带状态的可控制轮播图组件实现方法；依靠图形学方法和3D加速器GPU并行计算所有路网的动态数据，低内存高效运行。同时由于完全从底层glsl编写具备改写路网效果的各种接口，可以控制线颜色/长度/宽窄/稀疏度/流转运动速度。
GPU，又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上图像运算工作的微处理器，与CPU类似，只不过GPU是专为执行复杂的数学和几何计算而设计的，这些计算是图形渲染所必需的。
下面结合附图，详细说明本发明的各种非限制性实施方式。
请参阅图1，图1示出了本发明实施例的自带状态的可控制轮播图组件实现方法，如图1所示，本发明实施例所述方法包括：
S10、采用vue框架引用封装好的轮播图组件；
本发明实施例中，自带状态的可控制轮播图组件首先采用vue框架封装轮播图组件，集合第三方开源的轮播图组件代码，实现轮播图的呈现，满足基本的轮播功能。首先是采用vue框架引用封装好的轮播图组件。
S20、在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换。
本发明实施例中在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换。
如图3和图4所示，设置鼠标选中时停止自动轮播，状态如下图2，右上角标记为灰色，代表停止自动轮播，可以进行手动切换；设置鼠标取消选中时，状态如下图3，右上角标记为闪动的白色动画。
S30、在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
本发明实施例中；通过添加鼠标点击事件来控制轮播图自动轮播，代替原有的添加按钮来控制轮播图轮播的方式。例如设置鼠标点击选中时停止自动轮播，鼠标再次点击取消选中。
S40、根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
本发明实施例中，根据配置文件中各种属性可以配置轮播图是否自动轮播(autoplay)、自动轮播切换时间间隔(delay)、当前容器可以显示几项(slidesPerView)、轮播方向(direction)等。
本发明在具体实施时需要预先设置配置文件，设置有需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给轮播图组件，如果未传入数据，便显示默认的数据来渲染轮播图。
如图1就是配置文件，其中有需要配置的属性以及属性的注释。
本发明中通过配置文件一方面满足不同人员与对于轮播图属性的修改，另一方面方便一些非开发人员可以随意的进行轮播图样式的配置修改。比如在某个项目中，使用了轮播图组件，项目交给客户，客户想让轮播图轮播的慢一点，因为轮播太快可能会导致某一项还未看清便切换到下一项了。在引用目前存在的一些开源的或者未开源的轮播图出现此类问题时，就需要开发人员进行项目源代码的修改。此时要进行一系列的流程，比如第一步：现场技术支持人员从客户一方得知此需求记录下来；第二步：通过一系列的途径联系到开发此项目的开发人员；第三步：开发人员接收到此需求进行源代码的修改，可能将轮播时间间隔修改到20s、30s或者等等，修改完毕重新打包补丁包提供给技术支持；第四步：技术支持再演示给客户，如果达到客户要求还可以，一旦达不到客户的要求，便需要再重复此流程；显而易见，此间浪费了大量时间以及人力物力，严重时还会影响项目验收、公司信誉等等。此时，如果采用本发明自带状态的可控制轮播图组件，客户一旦不满意轮播图的自动轮播切换时间间隔(delay)、当前容器可以显示几项(slidesPerView)、轮播方向(direction)等，就可以直接实时通过配置文件来修改轮播的时间间隔，以达到客户的要求，方便快捷，节约了大量的时间以及人力物力，提高了项目的灵活性。
S50、根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
本申请中，通过轮播图右上角添加状态图标，直接明了的告知用户当前轮播图的轮播状态，避免用户进行不必要的操作，避免浪费时间。比如在某个项目中，使用了之前开源或者未开源的轮播图组件，通过添加一个或者两个按钮来控制轮播图的自动轮播，当按钮点击进行切换时，有可能客户点击了按钮，切换到了自动轮播的状态，但是时间间隔为20s，用户还要等20s才会看到轮播图轮播的效果，这样的话，每一次改变状态都要浪费20s，累积到最后，会导致浪费大量的时间；除此之外不乏有的客户性格比较急，不停的点击按钮，看看是否停止或启动自动轮播，此时严重的话可能会出现程序崩溃的问题；甚至有客户会误以为按钮没有切换状态的效果，再将此类问题反馈给现场技术支持人员，进而通知开法人员进行一系列问题定位的操作，更加浪费了时间以及人力物力。
所以，本发明采用这个自带状态的可控制轮播图组件，右上角的状态图标可以直接明了的告知用户此时轮播图自动轮播的状态，如果出现上述情况，用户点击的时候直接可以看到状态，点击一次状态会实时的进行变更，通过看到状态变化就不会再继续点击了，也不会误以为鼠标点击没有切换自动轮播的效果，解决了此前的轮播图状态不明确的问题，还节省了大量的时间以及人力物力，避免了客户操作出现问题。
具体操作为：鼠标选中时停止自动轮播，状态如下图3，右上角标记为灰色，代表停止自动轮播，可以进行手动切换；鼠标取消选中时，状态如下图4，右上角标记为闪动的白色动画。
S60、当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。
具体操作为：如图3所示，鼠标点击选中时停止自动轮播，为手动切换状态；如图4所示为鼠标再次点击取消选中时，自动轮播状态。
本发明实施例中通过鼠标点击事件来控制轮播图自动轮播的方式，一方面简化了界面，另一方面方便用户进行操作。比如在某个项目中，使用了之前开源或者未开源的轮播图组件，通过添加一个或者两个按钮来控制轮播图的自动轮播，不乏有客户或感觉这个界面添加个按钮会有点多余，原本一眼过去整整齐齐的界面，添加了一个按钮，会感觉有点奇怪，还影响美观。但是此时如果直接去掉按钮，会无法控制轮播图的轮播，导致无法满足客户想停下轮播来看某一项的需求，严重的话会让客户感觉到项目比较死板，无灵活性。
本发明则采用这个自带状态的可控制轮播图组件，不用添加过多繁琐的东西，比如按钮等。简化了界面，让客户看到界面眼前一亮，轻易不会有界面过于繁琐的此类问题，轻轻松松达到客户的要求。
以下通过一具体应用实施例对本发明方法做进一步详细说明：
如图5所示，本发明具体应用实施例提供的一种自带状态的可控制轮播图组件实现方法，包括以下步骤：
1)、开始；
2)、采用vue框架引用封装好的轮播图组件；
3)、在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；
4)、在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
5)、配置轮播图组件是否自动轮播(autoplay)；
6)、配置自动轮播时间间隔(delay)；
7)、配置当前轮播图容器可显示几项(slides PerView)；
8)、配置轮播方向(direction)；
9)、配置轮播图数据；
10)、检测是否传入数据，当传入数据则渲染传入的数据，当没有传入数据，则采用默认数据，渲染默认数据；
11)、鼠标点击，触发鼠标点击事件；
12)、IsChecked＝＝ture？判断鼠标是否被选中，当是则开启自动轮播，改变状态为自动轮播状态；当否则停止自动轮播，改变状态为停止轮播状态。
13)、结束。
由上可见，本发明所述方法本申请通过给轮播图添加一个状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换，方便用户清楚的看到轮播的状态。除此之外，通过添加鼠标触发事件来控制轮播图是否自动轮播，解决通过添加按钮控制使得界面过于繁琐的问题。
在一个实施例中，本发明提供了一种自带状态的可控制轮播图组件实现***，如图5所示，所述***包括：
封装模块41，用于采用vue框架引用封装好的轮播图组件；
状态图标添加模块42，用于在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；
鼠标触发事件添加模块43，用于在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
配置模块44，用于根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
轮播图呈现模块45，用于根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
轮播切换模块46，用于当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。
配置文件设置模块47，用于设置配置文件，设置有需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给轮播图组件；具体如上所述。
在一个实施例中，本发明提供了一种计算机设备，该设备可以是终端，内部结构如图7所示。该计算机设备包括通过***总线连接的处理器、存储器、网络接口、显示屏和输入***。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***和计算机程序。该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种自然语言模型的生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入***可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图7所示的仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
本发明实施例提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
采用vue框架引用封装好的轮播图组件；
在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；
在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换，具体如上所述。
综上所述，与现有技术相比，本发明实施例具有以下优点：
本发明实施方式提供一种自带状态的可控制轮播图组件实现方法；方法包括：在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；添加鼠标触发事件用来控制轮播图是否自动轮播；根据配置文件中各种属性配置轮播图；根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。本申请通过给轮播图添加一个状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换，方便用户清楚的看到轮播的状态，通过添加鼠标触发事件来控制轮播图是否自动轮播，解决通过添加按钮控制使得界面过于繁琐的问题。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (6)
1.一种自带状态的可控制轮播图组件实现方法，其特征在于，所述方法包括：
采用vue框架引用封装好的轮播图组件；
在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态；
在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换；
所述在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态的步骤包括：
设置鼠标选中时停止自动轮播，状态图标标记为灰色，代表停止自动轮播；设置鼠标取消选中时，状态图标标记为闪动的白色动画；
预先设置配置文件，设置需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给轮播图组件，如果未上传所述数据，显示默认的数据来渲染轮播图。
2.根据权利要求1所述自带状态的可控制轮播图组件实现方法，其特征在于，所述采用vue框架引用封装好的轮播图组件的步骤包括：
采用vue框架封装轮播图组件；
采用vue框架引用封装好的轮播图组件。
3.根据权利要求1所述自带状态的可控制轮播图组件实现方法，其特征在于，所述在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播的步骤包括：
设置鼠标点击选中时停止自动轮播，鼠标再次点击取消选中。
4.一种自带状态的可控制轮播图组件实现***，其特征在于，所述***包括：
封装模块，用于采用vue框架引用封装好的轮播图组件；
状态图标添加模块，用于在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态；
鼠标触发事件添加模块，用于在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
配置模块，用于根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；还用于预先设置配置文件，设置需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给所述轮播图组件，如果未上传所述数据，显示默认的数据来渲染轮播图；
轮播图呈现模块，用于根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；还用于设置鼠标选中时停止自动轮播，状态图标标记为灰色，代表停止自动轮播；设置鼠标取消选中时，状态图标标记为闪动的白色动画；
轮播切换模块，用于当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。
5.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至3中任一项所述自带状态的可控制轮播图组件实现方法的步骤。
6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至3中任一项所述自带状态的可控制轮播图组件实现方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911266143.6A CN111104114B (zh) | 2019-12-11 | 2019-12-11 | 自带状态的可控制轮播图组件实现方法及***、设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911266143.6A CN111104114B (zh) | 2019-12-11 | 2019-12-11 | 自带状态的可控制轮播图组件实现方法及***、设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111104114A CN111104114A (zh) | 2020-05-05 |
| CN111104114B true CN111104114B (zh) | 2023-11-07 |
Family
ID=70422229
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911266143.6A Active CN111104114B (zh) | 2019-12-11 | 2019-12-11 | 自带状态的可控制轮播图组件实现方法及***、设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111104114B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114138391A (zh) * | 2021-12-04 | 2022-03-04 | 杭州安恒信息技术股份有限公司 | 一种信息列表轮播方法、***及计算机存储介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110321502A (zh) * | 2019-05-30 | 2019-10-11 | 阿里巴巴集团控股有限公司 | 电子推广资源轮播控制方法、装置、终端及可读存储介质 |
| CN110413355A (zh) * | 2018-04-28 | 2019-11-05 | 北京京东尚科信息技术有限公司 | 一种控制轮播的方法和装置 |
-
2019
- 2019-12-11 CN CN201911266143.6A patent/CN111104114B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110413355A (zh) * | 2018-04-28 | 2019-11-05 | 北京京东尚科信息技术有限公司 | 一种控制轮播的方法和装置 |
| CN110321502A (zh) * | 2019-05-30 | 2019-10-11 | 阿里巴巴集团控股有限公司 | 电子推广资源轮播控制方法、装置、终端及可读存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111104114A (zh) | 2020-05-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108279964B (zh) | 蒙层渲染的实现方法、装置、智能设备及存储介质 | |
| EP3111318B1 (en) | Cross-platform rendering engine | |
| US20210141523A1 (en) | Platform-independent user interface system | |
| US20110197165A1 (en) | Methods and apparatus for organizing a collection of widgets on a mobile device display | |
| CN103365761A (zh) | 进度条 | |
| US20230013601A1 (en) | Program trial method, system, apparatus, and device, and medium | |
| KR20170113705A (ko) | 애플리케이션 선택 가능 사용자 인터페이스에서 새로운 콘텐츠의 점진적 표시 기법 | |
| CN106354465A (zh) | 一种终端设备 | |
| CN105930467A (zh) | 一种信息处理方法及电子设备 | |
| CN106340055A (zh) | 一种基于多线程的OpenGL快速绘制方法 | |
| CN110516179A (zh) | 图形渲染方法、装置、电子设备及存储介质 | |
| US9594469B2 (en) | Dynamic layering user interface | |
| CN108958630A (zh) | 书写内容显示方法、装置及电子设备 | |
| CN111432264A (zh) | 基于媒体信息流的内容展示方法、装置、设备及存储介质 | |
| CN111124668A (zh) | 内存释放方法、装置、存储介质及终端 | |
| KR101431311B1 (ko) | 그래픽 이미지들의 시각적 창작 동안의 성능 분석 | |
| CN110471701A (zh) | 图像渲染的方法、装置、存储介质及电子设备 | |
| CN111104114B (zh) | 自带状态的可控制轮播图组件实现方法及***、设备 | |
| CN115469954A (zh) | 一种基于Canvas的图像标注方法及*** | |
| CN111258701B (zh) | 一种状态图标控制方法、智能终端及存储介质 | |
| WO2022237083A1 (zh) | 信息显示方法、装置、终端、存储介质及计算机程序产品 | |
| CN115509412A (zh) | 用于特效交互的方法、装置、设备和存储介质 | |
| CN108390915A (zh) | 界面的渲染方法及终端设备 | |
| CN114924837A (zh) | 数据处理方法、电子设备和可读存储介质 | |
| CN103207736A (zh) | 一种用于android终端的部件图标的显示方法 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |