查看: 4267|回复: 0

跟我学PaPaSketch—5.滚动

[复制链接]

0

主题

146

回帖

28

积分

版主

Rank: 7Rank: 7Rank: 7

积分
28
发表于 2013-4-26 00:11:51 | 显示全部楼层 |阅读模式
尹广磊公众帐号
当内容太多时,一屏显示不下,这时必须通过滚动来显示更多的内容,因此滚动是在手机和平板中常常用到的一种操作方式,本章我们讲PaPaSketch怎样实现滚动操作。

我们先创建一个空白文档,并放一个IPhone手机外壳在幻灯片中,界面如下:
p1.png
用鼠标双击手机屏幕,在弹出的窗口中点击“创建幻灯片”,为手机屏幕创建一张新幻灯片
p2.png
接下来我们要用到一个重要的组件:ScrollViewer,PaPaSketch中所有的滚动操作,都是由这个组件来实现,它位于“Common”组。我们拖一个ScrollViewer到当前幻灯片中,调整它的大小,占满整张幻灯片,界面如下:
p3.png
ScrollViewer上面写着“双击编辑内容”,我们用鼠标编辑它,会发现进入了另一个界面,如下图:
p4.png
我们现在进入了ScrollViewer内部,看到的界面是用来放ScrollViewer的内容的,它的内容的大小比ScrollViewer要大。注意左上角出现了导航栏,它上面写着”Slide>ScrollClontent”.如果你编辑过Group,应该见过这个导航栏。它表示我们现在进入了一个组件的内部,显示的进入这个组件的顺序,最外面是Slide,我们现在看到的是scrollContent,是Slide中的一个ScrollViewer的Content,如果我们要回到Slide的界面,只需要用鼠标点击导航栏上的“Slide”就可以了。

ScrollContent上画有虚线格子,格子的大小和ScrollViewer相等,这样调整ScrollContent时好有参照。我们现在调整ScrollContent的大小为两个ScrollViewer的大小,结果如下:
p5.png
接下来我们放一个Image在ScrollContent的上半部分,并且添加一个图标“1”,结果如下:
p6.png
在下半部分再放一个图标,增加一个图标“2”
p7.png
我们点工作区左上角的导航栏的”Slide”文字,回到幻灯片,界面如下:
p8.png
点击工具栏上的“放映”命令, 放映幻灯片。我们按住鼠标向上拖拽图标“1”,发现图标“1”会跟着向上衮东,图标“2”会从下来出来。
p9.png
我们这里只做了两屏内容,你可以做更多地内容,可以选择竖向或横向,这样实现滚动的原型是不是很简单呢?
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-12-23 08:49

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表