欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

Axure怎制作表格升序或降序效果?

程序员文章站 2023-12-03 19:02:16
Axure怎制作表格升序或降序效果?...

axure想要制作一个表格内容修改排序效果,上下行的交换,该怎么这个交互效果呢?下面我们就来看看详细的教程。

Axure怎制作表格升序或降序效果?

 新建一个“中继器”,如下图所示:

Axure怎制作表格升序或降序效果?

“中继器”设置2列:id、content;可按所需设置行内容; (id是用来排序的,建议按数字顺序设置),可参考下图设置:

Axure怎制作表格升序或降序效果?

双击进入“中继器”内部,先清除原来内容;新建2个“文本标签”、1个“矩形”、1个“向上箭头”的图标、1个“向下箭头”的图标;如下图所示:

Axure怎制作表格升序或降序效果?

设置一个“文本标签”为num;

设置一个“文本标签”为content;

设置"矩形"尺寸:280*60;填充色:#cccccc

布局如下图所示:

Axure怎制作表格升序或降序效果?

到这里,基础的布局设置结束,以下是交互设置~

首先是“中继器”的“每项加载时”的交互:

Axure怎制作表格升序或降序效果?

动作:

设置“文本标签:num”的值:[[item.index]]

设置“文本标签:content”的值:[[item.content]]

如下图所示:

Axure怎制作表格升序或降序效果?

Axure怎制作表格升序或降序效果?

”图标:向上箭头“的”鼠标单击时“的交互:

Axure怎制作表格升序或降序效果?

相关标签: Axure 表格