近一段时间以来工作的重心开始转向产品方向，也学习了一些入门的Axure技术。今天自己动手用动态面版做了一个滚动页面，正好以此为契机写下我在简书的第一篇文章，希望开始纪录一下我的产品进阶过程。废话就不多说了，直接进入实操。
1、在Axure中添加两个方框、一个动态面板分别命名为“顶部菜单”、“底部菜单”、“内容”。这个名为“内容”的动态面板就是我们接下来要操作的可拖动页面。具体界面如下图
2、接着双击“内容”动态面板弹出“面板状态管理”，选中“State1”确定进入面板编辑页面：
3、然后我们在“内容”面板的“State1”里面添加一个叫“拖动面板”的动态面板。说直白点就是一个动态面板嵌套另一个动态面板。用操作“内容”动态面板的方法给“拖动面板”的其中一个状态添加需要显示却又超出界面的长内容，在这里我用方框随便摆了个版面，最终得到的效果：
这时候我们回到最开始的页面，看到的效果是这样的：
4、选中“内容”动态面板，给他添加交互：拖动时。给用例添加动作“移动”，配置动作选择“拖动面板”，在配置动作的下方移动选项选择“垂直拖动”，最后确定保存设置。点击预览已经可以拖动内容上下移动。
5、接着我们继续完善拖动的功能，当上下拖动时如果“内容”面板不能拖离“顶部菜单”或“顶部菜单”，应该是挨在一起的，如果拖远了，当鼠标松开时应该弹回至“顶部菜单”或“顶部菜单”的边上。我们给“内容”添加“拖动结束时”的交互，打开用例编辑，点击“编辑条件”
条件按下图这样选：远件范围 拖动面板 未接触 元件范围 顶部菜单。这些中文已经很明显，当“拖动面板”没有接触“顶部菜单”时触发下一个动作。
返回用例编辑，添加动作“移动”
配置动作选择“拖动面板”，移动选择“到达”，x坐标与y坐标都设为0。动画选择“线性”，时间这里设为200毫秒。确定保存。这时返回主界面点击预览我们已经可以看到往下拖动时如果内容已经见顶，都会自动弹回到“顶部菜单”位置。
附上RP文件：
链接：http://pan.baidu.com/s/1mic2lwG 密码：p3qe
网友评论