Axure教程—省市区三级联动(中继器)

本文将教大家如何用AXURE中中继器制作省市区三级联动
一、效果
Axure教程—省市区三级联动(中继器)_第1张图片

预览地址:https://t6gmmh.axshare.com

二、功能
选择省份、出现相应的市区,选择市区出现相应的区或县
省市区三级联动效果
三、制作
1、省
拖入一个矩形,命名为省,文字设置为”请选择“,如图:
在这里插入图片描述
在其下面拖入一个动态面板,命名为省,点击进入,拖入一个动态面板,在其面板中拖入中继器组件,并为其赋值,如图:
Axure教程—省市区三级联动(中继器)_第2张图片
2、城市
在”省“的矩形右边拖入一个矩形,命名为市,如图:
在这里插入图片描述
在其下面拖入一个动态面板,命名为城市,点击进入,拖入一个动态面板(设置自动显示垂直滚动条),在其面板中拖入中继器组件,并为其赋值,如图:
Axure教程—省市区三级联动(中继器)_第3张图片3、区或县
在”市“的矩形右边拖入一个矩形,命名为区县,如图:
在这里插入图片描述

在其下面拖入一个动态面板,命名为区县,点击进入,拖入一个动态面板(设置自动显示垂直滚动条),在其面板中拖入中继器组件,并为其赋值,如图:

Axure教程—省市区三级联动(中继器)_第4张图片
最终设计,如图:
Axure教程—省市区三级联动(中继器)_第5张图片

四、交互
1、省
矩形”省“的设置,如图:
Axure教程—省市区三级联动(中继器)_第6张图片
动态面板”省“的设置,如图:
Axure教程—省市区三级联动(中继器)_第7张图片
动态面板”省“内的中继器设置,如图:
Axure教程—省市区三级联动(中继器)_第8张图片
2、市
矩形”市“设置,如图:
Axure教程—省市区三级联动(中继器)_第9张图片
动态面板”成市“内的中继器设置,如图:
Axure教程—省市区三级联动(中继器)_第10张图片

3、区县
矩形”区县“设置,如图:
Axure教程—省市区三级联动(中继器)_第11张图片
动态面板”区县“中的中继器设置,如图:
Axure教程—省市区三级联动(中继器)_第12张图片
制作完成。

你可能感兴趣的:(Axure高保真原型设计,Axure原型设计,Axure,axure,Axure教程,axure设计,Axure动态面板,Axure中继器)