Axure高保真教程自动滚动的排名表格

编纂导语：若何应用中继器，制造一个可以主动滚动的排名表格，让信息可以更好地被展现。本篇文章里，作者对若何在Axure里制造可主动滚动的排名表格一事做了示例，一路来看一下。

排名表格是数据可视化里面一个常用的对象，以是作者本日请教年夜家在Axure里面若何制造一个能过主动滚动的排名表格，我们以浏览排行榜为案例教程。

一、制造完成后应具备以下后果主动轮播滚动的后果，主动轮播排名表的信息。易维护的后果，我们经由过程中继器来制造，后续维护内容只必要在中继器表格里填写笔墨和导入图片，主动天生交互后果，从而进步表格的复用性。

原型地址：https://80otp5.axshare.com/#g=1

二、制造资料预备

主要资料包含中继器元件、矩形元件、图片元件、文本标签、外框和图标。

外框主要是由图片笔墨而成，你们可以依据你们的必要来设置即可。

表头的话你们可以用矩形或者表格来制造，案例顶用6个矩形制造，你们也可以依据你们所必要的展现的内容来添加或者删除

中继器是最紧张的元件，后续的元件都是放在中继器内部。从左一次为排名文本、图片元件、博主名称文本、浏览量文本、点赞数文本、评论数文本和总分值文本。如下图所示摆放，和上面的表头的题目内容逐一对齐。

中继器的表格我们也是设置7列，分离对应上面中继器表格内的7个元件，no列对应排名文本，pic列对应图片元件，name列对应博主名称文本，yueduliang列对应浏览量文本，dianzan列对应点赞数文本，pinglun列对应评论数文本，fenzhi对应总分值文本。

在中继器内导入对应的文本和图片，中继器配景色彩设置为瓜代色彩，分离选择白色和浅蓝灰色，如许就有距离分歧色彩的后果。

三、交互设置

我们经由过程设置文本的交互，将中继器里no列的值设置到元件排名文本，name列的值设置到元件博主名称文本，yueduliang列的值设置到元件文本，dianzan列的值设置到元件点赞数文本，pinglun列的值设置到元件评论数文本，fenzhi的值设置到元件总分值文本。

然后用设置图片的交互，将中继器表格里pic列的图片设置到中继器里的图片元件。

完成上述操作后，我们选择中继器表格，经由过程鼠标右键将中继器转为动态面板，将动态面板的这个状况（默认是state1）复制几个，详细看你的数据量。案例中的数据量为20，默认显示前5个，以是我们统共必要4个state

复制完成后，我们将数据内容导入到state2到4面板里的中继器表格中。

末了我们写轮回轮播的的交互，在动态面板载入是，我们设置动态面板的状况为next，勾选向后轮回，增长向上滑动的动画后果并设置动画光阴(动画光阴决议了滚动的速率，光阴越久，速率越慢)，勾选轮回距离，轮回距离的光阴要和动画光阴同等。

如许我们就完成了用中继器表格制造主动滚动的排名表格的原型模板了，以后使用只必要在动态面板里每个state的中继器表格中填写导入详细内容即可，主动天生表格轮播的后果

那以上便是本期教程的全体内容了，感兴致的同窗们可以着手尝尝，谢谢您的浏览，我们下期见，88~

本文由 @AI产物人 原创宣布于大家都是产物司理。未经许可，制止转载

题图来自Unsplash，基于CC0协定