Question

我是设计师，也是Framer的新手。

我希望能够根据滚动下方内容的方向隐藏/显示屏幕顶部的导航。如果我开始向下滚动页面，导航会向上移动。然后相反。

这是我一直在玩的东西，但到目前为止还没有运气。

scroll.on Events.Scroll， - ＆gt; 如果scroll.scroll＆gt; scroll.scrollY然后psd.subHead.animate 特性： y：-50

else scroll.scroll < scroll.scrollY then psd.subHead.animate
    properties:
        y: 0

我想如果滚动位置小于当前位置我想向上移动，如果滚动位置大于当前位置则向下移动。

非常感谢任何帮助！

Answer 1

ScrollComponent图层具有方向属性。来自文档：

scroll.direction

当前滚动方向。返回“向上”，“向下”，“向左”或“向右”。   滚动方向是拖动方向的倒数   动作：当向下拖动时，你有效地向上滚动。   此属性是只读的。

下面是一些示例代码，可帮助您入门。您可以在底部附近找到scroll.direction用法。

Framer.Defaults.Animation = time: 0.3

scroll = new ScrollComponent
    width: Screen.width
    height: Screen.height
    scrollHorizontal: false
    backgroundColor: "blue"
    contentInset:
        top: 10
        bottom: 10
    borderRadius: 8

for i in [0..10]
    layerA = new Layer
        width: Screen.width - 20, height: 150
        x: 10, y: 160 * i 
        backgroundColor: "#fff"
        superLayer: scroll.content
        borderRadius: 4

navBar = new Layer
    x: 0
    y: 0
    width: Screen.width
    height: 130
    borderRadius: 8
    backgroundColor: "red"

scroll.on Events.Scroll, -> 
    if scroll.direction == "up"
        navBar.animate 
            properties: 
                y: 0
    if scroll.direction == "down"
        navBar.animate
            properties:
                y: -130

基于在Framer.js中向上或向下滚动的操作

1 个答案: