编辑导语：Web靠山的列表组件在画原型的时候较量常见，所以PM有须要深入相识它的各类交互结果和对应原型画法；本文作者具体先容了如何用Axure画出Web靠山产物中的高级交互，我们以起来看一下。

咱们网站有不少文章讲过列表如何用Axure画出来，可是关于列表组件高级交互的文章却没有，但愿通过这篇文章让产物司理可以或许把握它。

以下4种高级交互案例是独立的场景，可是原型步调是有必然接洽的需要团结起来进修；详见原型地点：

一、悬停列表某行数据

实现道理：操作悬停交互样式来实现。

查察结果：

1）双击中继器“列表字段值”进入内部，从默认元件库拖动“矩形3”到画布位置（0，0），调解尺寸包围列表所有内容，填充颜色不透明度设为0%。

2）右键该矩形，点击“交互样式”，在“交互样式-鼠标悬停”弹窗勾选填充颜色，然后不透明度修改成10%。

3）点击“预览”按钮，然后在欣赏器中查察原型结果。

二、选择列表单行数据

实现道理：通过选择该行的时候，同时标志它。

查察结果：

1）先画选择按钮配景，双击中继器“列表”进入内部，从默认元件库拖动“矩形1”到列表值的最前面，修改尺寸为40*40px，适当后移其他内容的位置和调解尺寸。

2）再画选择按钮自己。从默认元件库拖动“复选框”到配景中符合位置，修改按钮尺寸为16，更好定名元件为“选择”。

3）点击该选择按钮；右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发事件“选中时”，添加行动“标志行”，方针选择元件“列表值(中继器)”，行选择“当前”，点击“完成”按钮。

4）点击“预览”按钮，然后在欣赏器中查察原型结果。

三、批量选择列表多行数据

实现道理：全选列表的时候，勾选所有列表行的选择按钮。

查察结果：

1）担任选择列表单行数据的原型步调；先画全选按钮配景，从默认元件库拖动“矩形2”到列表头的最前面，修改尺寸为40*30px，线段边宽修改为1，适当后移其他内容的位置和调解尺寸。

2）再画全选按钮自己；从默认元件库拖动“复选框”到配景中符合位置，修改按钮尺寸为16，更好定名元件为“全选”。

3）点击该全选按钮；右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发事件“选中时”，添加行动“配置选中”，方针选择元件“选择(按钮)”，点击“完成”按钮。

4）点击该全选按钮；右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发事件“打消选中时”，添加行动“配置选中”，方针选择元件“选择(按钮)”，配置“值”为“假”，点击“完成”按钮。

5）点击“预览”按钮，然后在欣赏器中查察原型结果。

留意：全选和反选的区别，各人可以思考下如何画出反选结果。

四、批量删除列表多行数据

实现道理：选择该行的时候标志它，然后操作中继器删除标志行。

查察结果：

1）担任选择列表多行数据的原型步调。从默认元件库拖动“按钮”到画布符合位置，修改尺寸为100*30px，双击输入文字“批量删除”，适当下移原先列表头和列表值的位置。