【Axure】新手教程之首页滑动栏目

Axure中做一个原型设计。主要利用的模块是中继器，动态面板，地图模块等。本意是做一个APP原型，用来设计自己所需要的功能。

首页

一、 循环Banner的Axure原型实现（动态面板）

　　顶部图片循环播放，需求如下：

•  　　　图片间隔3秒自动循环切换
• 　　　　图片切换的同事，原点变换颜色

 

　　步骤如下：

1. 插入图片控件，尺寸调整为所需要的部分。由于本次原型设计中，手机APP的框架设置为 W：304  H：512。所以讲此次的首页滑动栏中的图片设置为 W：301 H：170
2. 图片预览如下：
3. 拖入一个圆形空间，调整尺寸为 W：10   H：10  复制几个排列成一行对齐，然后将第一个颜色更改为红色
4. 全选图片和原点，点击右键，将其转换为动态面板
5. 双击该动态面板，进入state页面
6. 预览如下:
7. 单击state1，然后选择state1 进行复制，形成state2
8. 更换state2中的图片和圆点颜色。
9. 如果有多张图片，则需要进行多个state的创建，然后依次更换图片和圆点颜色，形成连续
10. 设置动态面板的动作。状态：载入时      动作：设置面板状态    基本情况如下图所示
11. 预览如下：

    

12. 这样基本完成了滑动的步骤。

二、中继器显示模块导航系列

　　　中继器导航，滑动栏目图片+文字系列组合，需求如下：

• 　　　将文字和图片进行组合形成导航栏
• 　　　多个项目能够滑动预览
•     底部有状态显示条，显示滑动的进度

 

　　步骤如下：

1. 添加中继器控件，增加行列。    *******注：这里只添加一页所显示的行列栏目，如果滑动的下一页，需要进行第二个中继器的制作。
2. 在这里可以右键设置中继器的显示内容。可以导入图片，文字，链接等。
3. 在这里，我设置了三列，分别是Column0 Column1 Column2 分别对应的图片，文字，链接
4. 预览图如下：
5. 然后双击中继器，在中继器中添加图片控件和文本标签，并且对齐
6. 设置图片空间和文本空间能够显示中继器中的图片和文本
7. 预览图如下：
8. 这样就能在中继器中显示图片和文字。
9. 接下来设置滑动的要求。
10. 基本设置和上图一样。需要先将该中继器转换成为动态面板，然后利用动态面板中的state状态来进行动作的设定。有多少栏滑动就设置多少个状态。
11. 然后这次不需要设置循环，而是设置成拖动。
12. 图片预览如下：       
13. 设置连接的话，也是同理。将其交互  设置成 单击时  动作：打开连接  值: [[Item.Column2]]
14. 这样设置后，直接点击即可打开连接跳转。

 

　　基本的动态面板的循环和切换滑动完成。

转载于:https://www.cnblogs.com/youngyan/p/11201947.html