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

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

实现步骤:

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

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

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

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

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


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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Axure教程:移动端原型页面横纵向滑动同时实现 现在,移动端已经逐渐超越了PC端成为了主流,各种手机APP称出不...
    简扬阅读 4,109评论 0 14
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,142评论 25 708
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,878评论 22 665
  • 时间过的飞快,如今的我23岁了,23岁的我还一事无成,23岁的我还什么都没有,还在苦苦煎熬着等待着一个机会,是用两...
    君叶9阅读 264评论 0 0
  • 昨天晚上向先生提出啪啪之事,没想到的是完全遭到拒绝,说实话很难过很伤心。如果是以前的我就会连拽带打的攻击他,但昨天...
    庚儿娘阅读 386评论 0 0