Principle精讲——Scroll、Drag、Page区分

作者:哈哈小脸 | 创建时间: 2023-08-08
Principle精讲——Scroll、Drag、Page区分

很多读者反馈分不清Principle中Scroll、Drag、Page的概念,今天我们结合demo来讲解一下他们的运用。

  • Horizontal(水平方向)
  • Vertical(垂直方向)
  • Static(静止的,静态的)

这个是所有物件的默认状态,这个物件是不能被移动的。

Drag(拖动)

例如我们做一个可拖动的悬浮窗,或者iPhone X中的放大镜,

demo如下:

Scroll(滚动)

我们手机上大部分页面都是Scroll组件,例如瀑布流的页面,有了scroll才有了我们“刷”手机的的动作。

具体的含义我们解释为:在一个指定的区域内,内容可以按照指定的方向滑动。

这里有两个我们要确定的,一个是“指定区域”,一个是“内容”。

其中这个“区域”就是我们设定某个原件为“Scroll”时的大小,这个区域大小是支持调节的。

demo中为一个水平方向的Scroll。

Page(翻页)

这个组件跟“Scroll”类似,也是滚动的,但是增加了“页”的概念,大家可以理解成翻页,就是看到当前页就看不到其他页

含义:指定一个区域为“页”的大小,系统按照页的大小划分内容为若干页,通过滑动动作来完成“页”的切换。

其中这个“区域”就是我们设定某个原件为“Page”时的大小,这个区域大小是支持调节的。

这里我们做banner可以用到

这里Page与Scroll是有区别的,Scroll滑动是随意停止在某个位置的,Scroll可以在一个区域内同时看到A内容的尾部和B内容的头部,但是page情况下,只能看到A页面或者只能看到B页面。

总结demo

这样我们就弄清楚啦。

可能我在做具体的定义时有,解释的很拗口,希望大家可以自己动手练习一下,加深印象。

此外还有Anna Hofmanova的作品源文件,供大家学习研究“page”。

作者:紫豆子

点击展开全文

更多推荐