.

数据库系列教程—网格列表组件:活动/投票/游戏分数排行

小常发表于:2021年08月23日 15:29:37更新于:2022年11月07日 17:21:48


用法:主要以图文自由结合的方式,灵活展示数据信息,如游戏排行榜、作品投票信息等。

使用权限:数据库功能专业版及以上版本可商用。

 

一、应用场景

网格列表组件可以通过图片加文本的形式展示数据信息,便于我们制作商品列表、作品投票及排行榜等等。

 

二、学习准备

如果对数据表的系列教程还不熟悉,可以点此查看数据表视频教程

也可以点此查看我们官网support中的文字系列教程。

 

三、组件用法

基础用法

1.添加网格列表

点击顶部菜单栏——高级组件——数据应用——网格列表组件;

image.png


 在弹窗中会展示多种常用的网格列表样式,包括商品列表、作品投票列表及导航菜单等,选择想要的网格列表样式,然后添加到页面中即可。

image.png

 

2.设置网格列表属性

右侧元素组件属性面板中可以选择模板类型,包含:网格、列表、Inline-Block和幻灯共四种布局类型,大家可根据自己信息展示的需求进行选择。比如作品投票展示更适合以网格形式进行展示,而游戏排行榜则适合列表形式进行呈现。

image.png

  • 网格

网格类型是指按照“网格”形式组织呈现数据,绑定数据的展示顺序为先左右后上下,我们可以在右侧属性面板中设置网格中数据的展示列数及默认加载数量。

根据网格组件区域宽度和网格列数,将这个区域平均切割成相同列宽的单数据容器,使得所有数据在区域内可以分布。

image.png

  • 列表

列表的数据呈现方式为:每条数据独占一行,所有数据自上而下垂直呈现。

image.png

  • Inline-Block

Inline-Block类型是指数据之间不存在换行符,根据网格列表组件的区域宽度,一个接着一个紧凑排列,如果当前行的宽度不足以展示全部数据,就会切换至下一行继续排列。

image.png

  • 幻灯片

使网格列表的数据内容可以横向滑动。image.png


 

3.数据绑定

网格列表基础样式设置成功后,需要关联数据信息进行具体展示。

首先要将数据表添加到我们的作品中,通过高级组件——数据应用——数据表进行添加。

image.png

 

选中网格列表组件,同样通过右侧属性面板进行数据绑定。根据列表中不同的内容依次绑定到数据表中对应的不同字段。

image.png

 

 

高级用法

如何对投票列表中的内容进行投票?

一、效果演示

 image.png

《实时投票效果简单演示》

  

二、操作步骤:

注:网格列表组件基本是与数据库操作相结合使用的,如果对数据库还不够了解或者想要在作品中添加更为复杂的制作逻辑,可以先学习下数据库相关教程。以下内容重点掌握:如何设置网格列表中的触发器。以作品投票列表为例,在点击不同的作品时会为对应的作品进行投票并增加票数显示。

 

1.首先选择【作品投票展示】的网格列表,添加到作品页面。

image.png

 

2.选中网格列表后,可以通过【列表结构及逻辑小面板】删除不需要的模块或者调整模块之间的位置顺序。

image.png

 

在点击每个模块时,右侧属性面板可以更改名称。

image.png

 

3.绑定数据。同本文基础用法中所讲解内容。

image.png

 

绑定数据后的效果演示:

image.png

 

注:后台数据表中的票数字段要勾选☑️ 所有用户可修改,便于我们在作品内进行投票时修改后台票数数据。

image.png

 

4.投票数据设置与更新

① 选中列表逻辑小面板中的容器,并在右侧属性面板中设置点击时触发【网格列表操作】——获取当前行数据,并将获取到的当前作品/用户信息的ID赋值给【全局变量】列表当前数据;

image.png

 

② 设置成功时触发【数据库操作】——【修改数据】 ,使用全局变量记录的ID来定位这条数据,给当前数据中的【票数】字段+1 ;

image.png

 

③ 设置修改数据成功时的触发——启动计时器,计时器=0时【触发数据刷新】——【网格列表刷新】,并重置计时器。(为了避免后台数据更新延迟而请求不到最新数据,这里添加一个倒计时计时器来辅助数据请求。)

image.png

image.png

这样就能在点击单独作品时,为其投票并时刻显示增加的票数。

 

网格列表触发行为介绍

网格列表操作——刷新列表行数据:仅在点击网格列表子容器或网格列表内某个子元素时,才可使用。使用场景:抽奖列表核销

image.png