PageComponent
The PageComponent is based on the ScrollComponent, but designed for displaying paginated instead of continuous content. It supports content layers of different sizes, and can snap to layers based on location and scroll velocity.
译:这个pagecomponent是基于scrollcomponent,但设计用于显示分页而不是连续的内容。它支持不同大小的内容层,并可以捕捉到基于位置和滚动速度的层。
# Create a new PageComponent and only allow horizontal scrolling.
page = new PageComponent
width: Screen.width
height: Screen.height
scrollVertical: false
# Define the first page
pageOne = new Layer
width: page.width
height: page.height
parent: page.content
backgroundColor: "#28affa"
Let's add a second page now. Read more about the addPage method.
# Define second page
pageTwo = new Layer
width: page.width
height: page.height
backgroundColor: "#90D7FF"
# Add the second page to the right
page.addPage(pageTwo, "right")
Another way to go about adding content is by using a for-loop.
译:另一个关于添加内容的方法是使用一个循环。
# Create a new PageComponent and only allow horizontal scrolling.
page = new PageComponent
width: Screen.width
height: Screen.height
scrollVertical: false
backgroundColor: "#fff"
# Create 5 new layers and add them to the page.content
for number in [0...5]
pageContent = new Layer
width: page.width
height: page.height
x: page.width * number
backgroundColor: Utils.randomColor(0.5)
parent: page.content
# Visualize the current page number
pageContent.html = pageContent.html = number + 1
# Center the current page number
pageContent.style =
"font-size" : "100px",
"font-weight" : "100",
"text-align" : "center",
"line-height" : "#{page.height}px"