（2月24日更新）B站视频版教程：https://www.bilibili.com/video/av80136342/

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

先看效果：

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

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

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

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

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

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

一、实现方案：

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

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

二、动态面板的内容设置

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

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

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

（内容我这里直接手机截图，也可以自行设计。）

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

（如下图，我这里直接截取的三张图片）

三、事件设置（左右滑动，页面切换）

1、内容页向左切换：

选中动态面板2（内容页），增加onSwipeLeft事件（左滑）

①Set Panel State为“内容页”，设置页面切换为Next，切换动画为 slide left。

②Set Panel State为“Tab页”，设置页面切换为Next，切换动画为 none。

2、内容页向右切换：

选中动态面板2（内容页），增加onSwipeRight事件（右滑），

①Set Panel State为“内容页”，设置页面切换为Previous，切换动画为 slide right。

②Set Panel State为“Tab页”，设置页面切换为Previous，切换动画为 none。

四、事件设置（上下滑动，页面浏览）

上下滑动我们使用onDrag事件+move动作来实现，由于页面的state会进行切换，我们需要三个onDrag+move的组合。

首先为动态面板2（内容页）增加三个onDrag事件的case。

增加方法：

双击onDrag事件，弹出的事件对话框中，点击顶部的Add Condition。

剩下的两个case依次设定为state2，和state3，这里代表onDrag事件可根据state做不同的动作。

为每个刚才设置好的Case增加move动作，move的对象是group起来的一组图片，Move的属性设为with drag y。

也可以设定一个上边界（Bounds），以防内容顶部滑动超出界面

参考设定值：top，is less than，0

其他两个case操作一样，下图是事件配置完的状态。

五、运行预览效果

运行一下，我们上下滑动页面，页面展示不同内容。左右滑动页面，页面可以有滑动效果的切换，顶部tab无滑动效果切换，一切正常，大功告成。

喜欢请点赞

---------------------------------

Axure快速入门系列教程：

Song：如何自学Axure（0基础入门教程）

Song：Axure动态面板（快速入门+轮播图案例）

Song：Axure动态面板（上下左右滑动页面）

Song：Axure母版使用技巧（效率提升100%）

Song：Axure 元件库 Bootstrap4（超实用）

Song：Axure中继器（快速入门+交互案例）