FramerJS -通过滑动在页面上垂直滚动内容

Question

在FramerJS中使用它是真的吗--通过滑动在页面上垂直滚动内容？例如: 1.我在Sketch with mask中有两组。2.将群组导入到FramerJS 3.每个群组都会在分帧器中添加垂直滚动4.我可以将这些图层与包围组一起用于水平滑动的页面吗？？

是否可以通过水平滑动来垂直滚动页面上的内容？

有谁举个例子吗？

Answer 1

是的，这是可能的。您可以在PageComponent中包装ScrollComponent层。以下是一些示例代码，可帮助您入门：

# This page component holds the horizontally aligned pages
pageComponent = new PageComponent
    y: sketch.navigationBar.height
    height: Screen.height - sketch.navigationBar.height
    width: Screen.width
    # The scroll direction is restricted to only allow for horizontal scrolling
    scrollVertical: false
    # The direction lock is enabled to only allow either horizontal or vertical scrolling
    directionLock: true

for pageIndex in [0...3]

    # A scroll component is created
    scrollComponent = new ScrollComponent
        size: pageComponent.size
        x: pageIndex * pageComponent.width
        contentInset: bottom: 40
        # Only vertical scrolling is allowed and the direction is locked
        scrollHorizontal: false
        directionLock: true

这来自Framer JS网站库中的Medium应用程序示例：

http://framerjs.com/gallery/preview/#medium-app.framer