菜鸟笔记---axure9 动态面板 移动端上下滑屏

在网上找了好久如何实现原型手机端上下滑动，各种攻略看的呀，方法都不一样，版本也不一样，试了半天都没成功，看的多了，知道个大体动态面板的操作路径了，才最终成功。（成功1.0，实现了滑动，但是细节控制的不太好）

首先，动态面板编辑路径

axure动态面板编辑的路径，作为小白的我，一直找不到怎么编辑，差点就放弃了。这里把本次需要用到的操作简单描述一下

1、default基本元件中找到【动态面板】

2、拖一个动态面板页面；

3、双击这个【动态面板】进入动态面板的编辑界面（上面有一条蓝绿色的条，表示进来了）

4、在这个编辑界面，你可以往上继续添加任何页面预算。一般会继续添加一些动态面板做一些动态效果，比如上下滑动、左右滑动、tab切换之类。

5、同理，所有的动态面板编辑都是找到入口，双击它，直到你要编辑内容可以选中那层。

开始实现上下滑屏效果（共5步）

1、先把要滑屏的页面的头部和底部元素放上、命名，这里为了方便描述，假设这两个元素分别叫做【头部】【底部】

      头部：一般都是导航栏之类的，实在没有头部的页面可以放个热区占位（热区目前我用的主要是隐形围栏功能）

       底部：一般都是菜单之类的，实在没有，同头部操作，放个热区上去。

2、在【头部】【底部】中间位置，铺一个动态面板，给他命名【屏幕】，这个面板就是手机看东西的窗口,等到最后就在在这个动态面板【屏幕】上增加交互，实现上下滑动

3、双击动态面板【屏幕】，进入动态面板编辑界面，在这个页面中再添加一个动态面板，给他命名【内容】（宽和动态面板【屏幕】一样，高就是实际这个页面能显示的所有东西需要的高度）

4、在动态面板【内容】上把需要显示的元素都组装好

备注：针对3、4步，可以通过如下操作来让显示内容更容易编辑、操作更方便

          可以先用普通的组件画出来长页面后，全选长页面右键“转换为动态面板”，然后复制到动态面板【屏幕】编辑页面中，转化成动态面板的长页面相当于第4步中的动态面板【内容】

5、给动态面板【屏幕】添加交互效果，实现上下滑动效果

• 添加“拖动时”交互

选中动态面板【屏幕】在右侧的交互栏中，选择“新建交互”——“拖动时“，其中”目标“选择动态面板【内容】，”移动“选择跟随垂直拖动，点击完成。

• 添加“拖动结束时”交互

选中动态面板【屏幕】在右侧的交互栏中，选择“新建交互”——“拖动结束时“，其他的选不要选择。点击"拖动结束时"交互名称，退出。

在交互栏出现的“拖动结束时”交互动作栏右侧有个“添加情形”，点击这个按钮，进入情形编辑弹窗页面。

在情形编辑弹窗页面，点击添加条件，在出现的行中依次选择：元件范围、动态面板【内容】、未接触、元件范围、【头部】，点击确认返回

在交互栏中，找到刚刚添加的情形1，双击，打开“交互编辑器弹窗”。

在“交互编辑器弹窗”中添加动作——元件动作——移动，然后在在最右侧的“设置动作”栏进行如下设置，设置后点击“确认”返回

目标：动态面板【内容】

移动：“回到拖动前位置”

动画：摇摆、500毫秒

轨迹：直线

继续在“拖动结束时”交互上添加情形2：在交互栏出现的“拖动结束时”交互动作栏右侧有个“添加情形”，点击这个按钮，进入情形编辑弹窗页面。

情形2的添加和编辑步骤同情形1，但是情形编辑和交互编辑器中项目选择不同，分别如下：

情形编辑弹窗页面，添加条件，依次选择：元件范围、动态面板【内容】、未接触、元件范围、【底部】，点击确认返回

交互编辑器弹窗，设置动作进行如下设置后点击“确认”返回

目标：动态面板【内容】

移动：“到达”     y轴=动态面板【屏幕】高度——动态面板【内容】高度

动画：摇摆、500毫秒

轨迹：直线

如果对你有帮助，记得关注我，知道你在看，我会更努力