1、在部件库中拖入一个图片部件 双击打开浏览手机外壳图片 加入到工作区中 跳转这张手机外壳图片的大小和位置
2、在手机内部框中制作一个列表页面 使用到的部件有图片部件、标签部件、水平线部件 将这些部件相互组合 设计一下样式还有调整一下大小和位置制作成一个网页列表如下图所示
3、选择页面中列表页下面所有的部件 将他们转换成为一个动态面板 将这个动态面板的名称命名为拖动 将这个拖动面板宽度大小为手机的内部宽度大小 高设置为手机内部高度减去列表页部件的高度大小
4、点击进入到拖动面板的状态1页面中 按照一定的列表顺序继续制作这个页面的列表 使这个列表的高度远远超过拖动动态面板的高度 选择页面中所有的列表部件 将他们转换成一个新的动态面板为了区分 将这个动态面板的名称命名为 拖动2
5、现在我们来设置拖动2面板的交互动作 当我们拖动面板时 面板X轴是不变的 只会改变Y轴的位置 所有我们在拖动2面板的动作交互 拖动动态面板时 移动拖动2面板 Y轴拖动
6、接下来我们需要设置两个参考线 为动态面板拖动2设置一个参考 拖动两个参考下到手机界面上 一根参考线命名为顶部 调整位置到列表页下面 一根参考下命名为底部 调整位置到手机底部内边框位置 将这两个参考线跳转一下层的顺序 设置到最底层
7、我们幻踔佐曝返回到拖动面板的状态1页面 设置一下拖动2的 结束拖动动态面板时 的交互动作 在弹出的用例编辑器中 编辑一下条件 当动态面板拖动2的部件范围未接触到顶部参考线时 移动拖动2面板到绝对位置（0,0） 将拖动2面板弹回显示第一屏位置
8、再设置 当结束拖动动态面板 第二个交互动作当动态面板拖动2的的部件范围未接触到底部参考线时 移动拖动2面板到绝对位置（0，-206） Y轴的位置计算方法为 拖动面板的高度减去拖动2面板的高度 将拖动2面板弹回显示最后一屏位置
