大家嚎,断更很久的我又回来了发教程,这次要教大家的是手机垂直划屏时旁边的滚动条的制作。
效果图
通过效果图我们可知我们的期望效果如下:
1、拖动开始时显示滚动条
2、拖动结束时隐藏滚动条
3、滚动条长度和文章总高度是成比例的
4、拖动到上边界时滚动条会成比例的缩短
5、拖动结束时滚动条会变回原来的高度
变量名说明
下文中说的main=显示范围层,text=内容层,bar=滚动条。
建议学习之前先看下之前的那篇教程:手机垂直划屏效果从零学起(一)
页面载入时
载入时要让滚动条的高度根据比例变为指定高度
[[main.height/text.height*main.height]]
main拖动开始时
显示bar
main拖动结束时
隐藏bar
拖动到上下边界结束时将bar还原到原来的高度,上下边界的锚点不同。
拖动到上边界时要以顶部为锚点,拖动到下边界时要以顶部为锚点。
拖动时对内容和bar进行拖动范围上下限设置
【重点:要用心理解,不理解自己画图理解。】
向下拖拽到上边界的情况,判定条件:[[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-拖动超出上边界值/半屏高度=滚动条高度系数
滚动条标准高度*滚动条高度系数=此时滚动条的高度
源文件&课后练习
→_→我知道你们一定又在要源文件了,介于这次教程需要脑力理解的内容很多,我就不出谜题给源文件网址了,因为有源文件不动脑子也是学不会的。
另外,我只做了上边界的拖动回弹滚动条效果,下边界的没做哟,想印证下自己是否真的学会了吗?把下边界的交互自己做了吧~