1.新建项目
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。
弄个“线性”动画效果是为了使过渡效果更平滑些，至于时间，根据自己的需要来定即可~
最终效果是这样的：
