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"

results matching ""

    No results matching ""