axure9怎么让页面上下滑动_Axure动态面板（上下左右滑动页面）

手机端交互中，页面的上下左右滑动是常用的交互形态，今天给大家分享一下如何使用Axure来进行模拟，这里使用动态面板来实现，如果对动态面板不是很了解的同学，请查看专栏里的“动态面板入门教程”。

先看效果：

开工之前我们我们先分析一下，滑动效果的用处和实现方法：

1、上下滑动：一般用于浏览页面，例如新闻客户端的信息流。

实现方案：通过onDrag事件(锁定y轴)控制页面move动作，使页面上下移动

2、左右滑动：一般用于tab切换，且一般都是顶部tab，例如新闻客户端的分类

实现方案：通过onSwpieLeft和Right控制多个state页面切换，达到tab切换

案例：模拟头条的页面切换(上下浏览页面，左右切tab)

一、实现方案：

由于顶部tab和内容页面的切换效果不一样(一个为滑动，一个无动画)，我们这里将tab和页面分隔为两个动态面板来实现。

我们首先创建两个动态面板，如下图，我们分别命名为：Tab页，内容页。

二、动态面板的内容设置

1、为动态面板2(内容页)，增加三个state页面，并将三个页面内容填充进去

①为了体现上下滑动效果，页面尽量长一些，至少2屏，这样滑动效果较好。

②每个页面中的元件制作完成后，建议都group起来，方便后续绑定action。