Axure RP8 | 母版自定义触发事件

母版：解决多个页面中重复内容的编辑问题
自定义触发事件：在添加了母版的页面上给母版中的某个触发事件单独添加交互

场景一：page1、page2两个页面中添加了同一个母版，模板中有一个“在线客服”的按钮。在page1中，鼠标移入这个按钮时会显示客服小陈的头像；而在page2中，鼠标移入这个按钮时会显示客服小李的头像。

新建一个母版，命名为OnlineService，添加一个【矩形】当作按钮和一个【图片】当作头像（状态为隐藏）。因为场景是鼠标移入按钮后，图片将发生变化，所以将图片命名为CallCenter

*注意：命名尽量为字母和数字，并且不能有空格，下文会再次提到

创建母版

双击母版，即打开母版的编辑区域。点击导航菜单的【布局】-【管理母版触发事件】，按【+】新建一个自定义的触发事件，命名为MyMouseMove

自定义触发事件

选择需要变化的元件，【添加用例】-【鼠标移入时】-【引发事件】-勾选MyMouseMove
注意：这里提到——触发事件名称必须为字母和数字，并且不能有空格，所以尽量还是养成不用中文命名的良好习惯~

绑定

交互事件

将母版添加到page1、2中

添加

功能介绍

在page1中选中母版，为右边的自定义触发事件“MyMouseMove”添加用例

添加用例

设置客服小陈的图片

设置图片

【显示】- 选中 -【弹出效果】
弹出效果能够让鼠标离开时图片元件“CallCenter”再自动回复隐藏状态

弹出效果

page2同上述操作

！可能会出错

如果一开始母版选择的交互是【鼠标移入时】，预览的时候很有可能出不来，至于原因我也不太清楚……在网上搜了下可能是以下原因

image.png

所以！母版的交互我选择【鼠标单击时】~

场景二：导航菜单项。点击导航栏不同按钮，出现不同页面，且按钮会变色。

新建母版Menu。在母版里，把左侧的page3、page4、page5直接拖过去（会自动形成一个矩形按钮），并为元件命名。
注意：这里的元件命名一定要与页面名称完全一致，包括大小写也要一致。

母版

【布局】-【管理母版触发事件】，新增“PageOnLoad”

管理母版触发事件

然后在母版Menu里为每个按钮添加交互【载入时】-【引发事件】-【PageOnLoad】（见上上图）

（别问我为什么是“载入时”，我试过“鼠标单击时”不行，问就是不知道，反正“载入时”就相当于鼠标单击）

记得为按钮添加【选中】的样式

选中样式

把母版Menu添加到page3、4、5
在page3选中母版后，添加用例【选中】-【page3矩形】（一定要对应！）
page4、5同理

用例设置

此外，在不同页面里可以增加不同的内容

不同页面显示不同内容

欢迎讨论！如果有大神懂了文中的疑惑请告诉我555