axure页面上下滑动2019-6-14

1、先放一个手机框

滑动-手机框.PNG

2、再布局一个header，（类似banner），实现头部固定的（此部分可去掉）
主要步骤：
（1）将header转成动态面板
（2）选择Pin to browser
具体操作：1、拉一个矩形框作为header

滑动-header.PNG
选中header，右键选择转成动态面板，并命名headerpannel
选中headerpannel面板，在style里选则Pin to Browser
滑动-header固定.PNG
在弹出的面板里，选中Pin to browser window
滑动-header固定-弹窗.PNG
至此，头部固定框完成。
底部固定框复制header即可，需要改下名字，方便区分，动态面板footpannel
3、再布局一个图片（其他元素也行，当成页面，实现页面滑动）
主要步骤：
（1）将图片转成动态面板page
（2）给动态面板page添加action：ondrag。选择dy y（按照y轴移动）
（3）设定移动范围：page.y<=mobile.y ,page.y>mobile.height-page.height

具体操作：
先拉一个图片，作为展示内容，放在header下面

滑动-page.PNG

右键转化成动态面板，选中面板，在interactions里面，选择new interaction。

滑动-page-操作.PNG
选则OnDrag(拖动)
滑动-page-action.PNG
选择add one
滑动-page-move.PNG

选中Move（移动）

滑动-page-move选中.PNG
move操作里面具体配置见下图：
其中target是选则拖动的对象，this即当前对象
move ：with drag y，按照y轴即垂直移动
滑动-page-aciotn-设置.PNG

在more options里面，需要配置图片滑动的区域，不然图片可以任意拖动。

滑动-page-边界.PNG

图片底部bottom，应该大于等于footpannel.y
图片顶部top，应该小于等于header.y+header.height

滑动-page-边界设置-top.PNG 滑动-page-边界设置-具体内容-2.PNG

运行效果：
可实现图片的拖动
不好的点：图片移出边界的地方显示出来了。
解决办法：将图片的动态面板再次转换成动态面板，并设置成显示区域的大小。具体操作，下一篇再讲解。

过程中遇到的问题：
1、如果将手机框mobile转换成动态面板，并且固定，则图片会被遮挡。调整层级顺序没有效果。（转换成动态）