axure商城

手机垂直划屏效果从零学起(二)

大家嚎,断更很久的我又回来了发教程,这次要教大家的是手机垂直划屏时旁边的滚动条的制作。

效果图

3

通过效果图我们可知我们的期望效果如下:

1、拖动开始时显示滚动条

2、拖动结束时隐藏滚动条

3、滚动条长度和文章总高度是成比例的

4、拖动到上边界时滚动条会成比例的缩短

5、拖动结束时滚动条会变回原来的高度

变量名说明

下文中说的main=显示范围层,text=内容层,bar=滚动条。

建议学习之前先看下之前的那篇教程:手机垂直划屏效果从零学起(一)

页面载入时

载入时要让滚动条的高度根据比例变为指定高度

[[main.height/text.height*main.height]]

main拖动开始时

显示bar

main拖动结束时

隐藏bar

拖动到上下边界结束时将bar还原到原来的高度,上下边界的锚点不同。

拖动到上边界时要以顶部为锚点,拖动到下边界时要以顶部为锚点。

QQ截图20160210215903

拖动时对内容和bar进行拖动范围上下限设置

QQ截图20160210220312

【重点:要用心理解,不理解自己画图理解。】

QQ截图20160210220317

向下拖拽到上边界的情况,判定条件:[[text.y]]>0

此时,需要将bar的高度设置为[[main.height/text.height*main.height*(1-(text.y/(main.height*0.5)))]]

分解:

main.height/text.height=显示范围和内容页的比例

比例*main.height=滚动条标准高度

main.height*0.5=半屏高度

text.y=拖动超出上边界值

1-拖动超出上边界值/半屏高度=滚动条高度系数

滚动条标准高度*滚动条高度系数=此时滚动条的高度

源文件&课后练习

→_→我知道你们一定又在要源文件了,介于这次教程需要脑力理解的内容很多,我就不出谜题给源文件网址了,因为有源文件不动脑子也是学不会的。

http://pan.baidu.com/s/1XmWjG

另外,我只做了上边界的拖动回弹滚动条效果,下边界的没做哟,想印证下自己是否真的学会了吗?把下边界的交互自己做了吧~

给TA买糖
共{{data.count}}人
人已赞赏
案例教程

用Axure写产品需求文档实例

2015-12-22 16:49:42

案例教程

Axure8实例:支付宝咻一咻

2016-3-31 0:41:04

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索