.

排行榜插件使用教程

老赵发表于:2022年03月08日 10:59:10更新于:2022年04月06日 11:53:12

排行榜插件简介

排行榜是游戏组件中必不可少的组件,排行榜应用现支持以下功能:

  • 支持绑定数据表

  • 支持多字段自由绑定

  • 支持多条件排序

  • 支持配置前三名名次配图

  • 支持显示/隐藏表头

  • 支持配置表头文本颜色、列表文字颜色

  • 支持配置应用背景色、透明

排行榜插件使用前须知

目前,排行榜插件属于内测阶段,仅供用户试用体验,严禁将其用于商业目的。

如果在商用过程中出现任何问题、带来任何商业损失,意派科技不承担其带来的任何责任。

由于排行榜插件调用了微信接口,所以需开启微信授权使用。如何开启授权?

排行榜插件添加及配置

正式上线后,可以在编辑器顶部topbar——互动插件处找到排行榜插件。

一、添加排行榜插件

内测:在顶部栏——高级组件——beta 组件中,添加排行榜插件。

正式:在顶部栏 ——互动组件中,添加排行榜插件。

在顶部工具栏中的互动组件——排行榜来添加组件。注意:每个H5可以添加多个排行榜应用插件。  

image.png

创建排行榜应用时,需要添加数据表才能绑定。

数据过多时,可以上下滑动加载数据,左右滑动查看字段。

二、插件基本设置

点击画布中的排行榜插件,右侧会出现插件属性面板。

属性面板由配置面板、后台数据管理组成。点击配置面板,可设置排行榜插件的配置信息。

image.png

可以设置活动标题、排行榜配图。

image.png

活动名称:活动报名的活动的信息,可根据具体活动进行设置;

活动图片:可配置排行榜的前三名标识图片;

image.png

三、规则设置

支持隐藏/显示排行榜表头、支持应用背景色、表头背景色、文本、列表数据文本色配置。

image.png

效果如下:

image.png

四、样式设置

有时我们会需要对插件本身部分样式进行个性化调整,样式设置中支持我们自行编辑CSS 文档,支持嵌套,便于我们根据自己的想法需求去调整抽奖组件的布局和外观。

后续,我们将在【样式设置】面板中增加一些默认的css代码,方便不会代码的用户自定义文字颜色、字号等设置。

image.png

五.后台数据管理

点击属性面板中的后台数据管理,可进入排行榜应用绑定的数据表。

image.png

点击后跳转到绑定的数据表:

image.png

六、数据绑定

可将epub360数据表作为数据源,排行榜作为展示组件并具备排序功能。

其他应用数据、排行榜自身数据源后续扩展。

image.png

image.png 

七、排序规则设置

支持三级优先级排序,每个优先级可绑定的任意一个字段作为排序条件。

image.png

 

每个字段可设置升序、降序排序。

image.png

 

八、预览

设置完成配置后,我们可以左上角预览当前页或者点击发布手机扫码即可。


 image.png

 

手机端演示截屏:

image.png

 


--------- 不了解设计的程序员不是好客服 ---------------