【Axure】触摸屏上下滑动效果

1. 在一个页面创建3个元件

头部菜单  (矩形)                 命名【top】

内容(动态面板 ) 例:w:200    h:350             命名【内容】

底部菜单   (矩形)                   命名【tab】

【Axure】触摸屏上下滑动效果_第1张图片

2. 在“内容”动态面板中在添加动态面板“底层面板”

里面为具体内容,大小与实际内容大小相同 (例: w:200    h:800)

【Axure】触摸屏上下滑动效果_第2张图片
具体建后图层结构如图

3. 添加交互事件

3.1 拖动时事件

选中“内容”动态面板——>交互选择【拖动时】

底层面板添加【移动】动作,移动方式选择【垂直移动】

【Axure】触摸屏上下滑动效果_第3张图片

3.2 拖动结束时事件

选中“内容”动态面板——>交互选择【拖动时】

添加条件1(上划不过顶部菜单)

滑动效果

【Axure】触摸屏上下滑动效果_第4张图片

添加条件2(触碰顶部菜单且不出底部菜单)

【Axure】触摸屏上下滑动效果_第5张图片

滑动效果    注意:-450为     -(“底层面板”高度 - “内容”高度)

【Axure】触摸屏上下滑动效果_第6张图片

滑动效果完成~ 快去测试吧

【Axure】触摸屏上下滑动效果_第7张图片
Remember ME~

你可能感兴趣的:(【Axure】触摸屏上下滑动效果)