Axure怎么做下拉条件逻辑的效果

2025-10-11 00:05:47

1、从控件库拖拽一个下拉框,添加3个选项“电视机”、“冰箱”、“洗衣机”

Axure怎么做下拉条件逻辑的效果

2、再拖拽一个动态面板到页面,添加三个面板动态“电视机”、“冰箱”、“洗衣机”

Axure怎么做下拉条件逻辑的效果

3、双击“电视机”面板状态,在面板的区域添加需要展示的图片

同理,双击“冰箱”、“洗衣机”面板状态,添加对应的图片

Axure怎么做下拉条件逻辑的效果

4、鼠标点击下拉框,在右侧交互区域,添加交互案例

点击“OnSelectionChange”(选择更改),添加交互逻辑

ps:我用的英文版axure,大家可以图文结合着看操作过程

Axure怎么做下拉条件逻辑的效果

5、点击“Edit Condition”,选择电视机

Axure怎么做下拉条件逻辑的效果

Axure怎么做下拉条件逻辑的效果

6、点击“Set Panel State”,再勾选“Set dianqi state to 电视机”,点击ok即可

Axure怎么做下拉条件逻辑的效果

7、同理设置另外两个面板状态,设置完成,交互区域总共3个case

注意设置哪个面板状态,“select state”就选择哪个

Axure怎么做下拉条件逻辑的效果

8、点击预览,查看交互效果,切换下拉框的选项,页面展示对应的图片

Axure怎么做下拉条件逻辑的效果

Axure怎么做下拉条件逻辑的效果

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢