axure9怎么让页面上下滑动_Axure动态面板(上下左右滑动页面)

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

先看效果:

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

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

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

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

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

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

一、实现方案:

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

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

二、动态面板的内容设置

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

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

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

你可能感兴趣的:(axure9怎么让页面上下滑动)