axure拖动页面_Axure RP8 学习笔记二（实现移动端页面拖动效果）

概述

距离上一篇更新也过去了比较久的时间，因为公司最近一段时间的核心业务在于推广，因此自己也会时不时跳出产品参与到推广工作中来，再回到产品中来也有了不同的认识。因此最近这段时间的文章就简单介绍下自己在近期利用Axure实现的一些简单的功能以及实现方法。本篇是介绍利用Axure实现移动端页面的拖动效果。

问题描述

我们在用Axure实现网页端页面原型设计时我们往往不用太担心一个网页的页面很多很长怎么办，因为到时候预览原型的时候我们只需要用鼠标滚轮滚动便可以查看原型的全部内容而不用担心它的显示效果。

而当涉及到移动端原型设计的时候，就没有这么简单了。当我们想要在一个固定高度的手机壳中展示很多的内容的时候，如果碰到简单粗暴的设计者，那我们的设计图往往会变成下面这样。

粗暴的原型图

固定高度的手机壳里需要放很多的内容，于是我们就把手机壳一拉伸就好了。这很粗暴，能解决问题，但却不那么美观。如果能像我们真实使用手机一样在一个固定高度的手机壳里用鼠标拖动页面就好了。就像下面这样的效果。

能拖动的原型图

解决方案

我想这样的问题应该很常见，所以相信Axure必然是有提供解决方案的。搜索后发现解决方法还是有很多的，我也参考了一些资料，就自己所采用的方法的操作步骤做一个简单介绍。

核心思路

移动端显示的页面是固定尺寸的，因此我们需要使用一个动态面板，使它展示固定高度的内容。

我们需要展示的页面的高度是超长的，因此我们需要把这个页面放到第一点所提及到的动态面板中。

由于需要展示的页面需要能