Axure8.0实现移动端左右滑动切换效果(幻灯片)

案例描述:实现手指左右拖动时,页面切换显示内容

实现步骤:

1、在页面添加一个动态面板,如下图

Axure8.0实现移动端左右滑动切换效果(幻灯片)_第1张图片

2、给动态面板添加多个状态,每个状态代表一个页面,你若有n个页面,即添加n个状态;本人以4个页面为例,并给每个页面填充不同的内容,如下图:

Axure8.0实现移动端左右滑动切换效果(幻灯片)_第2张图片

3、当向左滑动时,切换下一页面,为动态面板的“向左拖动结束时”事件添加“case1”,设置动作的选择状态为“Next”,进入动画和退出动画为“向左滑动”,时间为500毫秒,如下图:

Axure8.0实现移动端左右滑动切换效果(幻灯片)_第3张图片
Axure8.0实现移动端左右滑动切换效果(幻灯片)_第4张图片

4、当向右滑动时,切换上一页面,为动态面板的“向右拖动结束时”事件添加“case1”,设置动作的选择状态为“Previous”,进入动画和退出动画为“向右滑动”,时间为500毫秒,如下图:

Axure8.0实现移动端左右滑动切换效果(幻灯片)_第5张图片
Axure8.0实现移动端左右滑动切换效果(幻灯片)_第6张图片

5、设置完成后,F5预览,如下图:


点击查看更多 Axure8.0交互设计及案例 

你可能感兴趣的:(Axure8.0实现移动端左右滑动切换效果(幻灯片))