Axure练习-轮播图动态指示器

绘制界面

首先添加一个动态面板，创建3个状态，每个状态面板里添加一个图片作为切换图。

然后添加两个圆形按钮，作为上一页、下一页的切换按钮。加好以后是这样的。只需要对着按钮右键->改变形状->选择圆形。

最后在底部放入一个中继器，调整为水平布局；中继器内只需一个字段【selectetd】，用来记录指示器的选中状态（1表示选中，0表示未选中），中继器内的数据行数与轮播图动态面板的状态数量相同，用来与轮播图一一对应，由于初始载入的时候，轮播图会显示第一张，所以在中继器数据中，将第一行的数据设为 1，其他设为 0。

然后呢就是一个很有意思的点，这个中继器的每一个元素的显示样式，都是它子元素叠加后的结果，这样的话其实这个中继器样式可以极其丰富。

添加交互

按钮轮播效果

两个切换按钮的交互如下，其实就是分别添加点击后切换动态面板状态的交互。分别是上一页，下一页的交互。

指示器与轮播状态同步

首先解释一下，这个中继器有俩元素，下面那个圆形是底色，上面那个圆点用来作为当前选中项的高亮状态。（前面也说过，中继器元素是它这个部件所有子元素的叠加）

然后为这个圆点添加交互，主要作用是加载一下初始状态，比如刚开始选中哪一个就需要让它处于高亮状态，所以需要在载入时检查一下。然后呢这个[[Item.selected]]，Item是中继器当前处理的行，因为Item只能用于中继器元素，然后指定当前行的selected列。如果是1，也就是被选中状态，则把当前这个元素设置为选中状态（有高亮），否则的话设置为未选中状态。

然后预览如下，高亮正常显示。

然后还需要一个公共的全局变量来共享定位当前页面状态。全局变量命名为panel_status。

下面是针对动态面板的交互：

设置变量值：当面板的状态发生变化时，也就是说当页面切换时，把panel_status的值设置为面板值（面板的命名为1、2、3等等），
编辑行数据：TargetItem是目标中继器的每一行，index则是行号，行号大于1的selected列值设置为0，说白了就是把所有行设置为0。（也就是先把所有的状态设置为未选中）。

TargetItem 指的是从中继器外部发起一个动作（比如“编辑行数据”），当中继器需要遍历并筛选所有行来决定对谁执行操作时，TargetItem 就代表“当前正在被规则检查的那一行”。

编辑行数据：这个则是判断当前的行号是否是选中的行，也就是面板的页面号，如果是的话设置为1。

指示器的点击切换效果

最后再来实现点击指示器联动轮播图切换到对应图片的效果，找到中继器内的圆点指示器，添加【单击】事件。

其实就是点击下面的轮播指示器后，需要判断下是向左还是向右切换，不同的方向滑动的方向也不一样。然后判断好后把当前中继器的行号赋值给全局变量panel_status，然后用这个全局变量更改动态面板的状态。然后呢，我们上面已经对动态面板的状态更改添加了交互（就是面板状态更改后，会将当前页面号写入全局变量->取消全部高亮->重新加高亮），所以点击下面的指示器后，触发切换动态面板状态，动态面板状态切换触发状态更新，下面的指示器状态会自动更新。

演示

可以看到完美实现了轮播图动态指示器，无论是状态共享还是动态切换！