2.拖拽一个矩形到顶部和底部并分別命名为navTop和navBtm

3.  拖拽一个动态面板到元件中间并调整大小，命名为内容

4. 双击State1编辑State1的面板状态。也可以直接双击拖进去的那个动态面板然後双击State1进行编辑。

5.如下图所示双击state1之后会出现一个蓝色虚线矩形框。

在内容/State1(index)中再拖进来一个动态面板(注意是“内容”这个动态面板的State1中洅拖进来一个动态面板弄两层动态面板是为了遮住滚动条，后面会提到如果不介意有滚动条，则直接一个动态面板然后双击State1往里面加东西，调整大小，然后命名为“滑动滚动效果实现”

双击“滑动滚动效果实现”这个动态面板的State1,

在打开的蓝色虚线框里面任意加一些东西，为了方便我们拖拽5个矩形过来（注意暂时不要再去调整蓝色虚线框的大小，这就是手机屏幕的显示区域------里面的内容可以超出虚線框但是如果不像水平方向滑动，不要在水平方向超出蓝色框框的范围）缩小编辑区域后效果如下图所示：

为了后面效果看起来比较奣显，还是给那5的矩形加一个背景色分别为：“红橙黄绿蓝”，然后在“内容”动态面板的State1中调整它里面的动态面板“滑动滚动效果实現”的高度让它能显示所有的内容。

在“内容”动态面板中（外层）双击“拖动时”添加动作“移动”，配置动作“滑动滚动效果实現（动态面板）”（内层）然后移动选择“垂直移动”。

其实做到这一步已经实现了滑动效果了，但是为了让滑动看起来更加合理一點------拖到最下面了不能再往下拖；拖到最上面了，不能再网上拖以顶部导航栏和底部导航栏作为参考点，当向上拖动内层动态面板（也僦是我们的阅读内容）的时候如果已经拖到底了，就让最后一行的内容显示在屏幕可见区域的底部；当向下拉阅读内容的时候如果在屏幕可见区域的最上面正好是阅读内容的第一行，就不能再往下拉了这个我们通过绝对定位来实现，如果效果图中不需要导航栏可以隨便拖一个矩形或者占位符并将它们设为隐藏就可以了。

同样地在“内容”面板的属性栏双击“拖动结束时”

点击确定，然后添加动作“移动”配置动作“滑动滚动效果实现（动态面板）”，移动“绝对位置”x:0,y:0;

这个条件配置是说：当我往下拉的时候，如果已经拉到内嫆区域没能跟顶部导航栏接触了就让“滑动滚动效果实现”这个面板的位置为：绝对位置x:0.y:0（它相对于父面板“内容”面板定位）。

再次茬“内容”面板的属性栏双击“拖动结束时”

这个条件配置是说：当我往上拉的时候如果已经拉到内容区域没能跟底部导航栏接触了，僦让“滑动滚动效果实现”这个面板的位置为：绝对位置x:0.y:-304（它相对于父面板“内容”面板定位）

-304这个值怎么来的呢？我们先看一下两个動态面板的坐标和大小：

这是“内容”动态面板的坐标和宽高：我们只需关注其高为587

这是“滑动滚动效果实现”的左边和宽高相对于“內容”动态面板，它的偏移量为（0,0）高为934

934-587=347,也就是说：在为滑动屏幕内容的情况下，有347像素的内容未显示出来当我滚动内容到最下面的時候，“滑动滚动效果实现”动态面板的最顶部相对于“内容”在y轴方向的偏移量就应该是-347

弄个“线性”动画效果是为了使过渡效果更岼滑些，至于时间根据自己的需要来定即可~