基於在Framer.js中向上滾動或向下滾動的操作

我是一名設計師，Framer很新。基於在Framer.js中向上滾動或向下滾動的操作

我喜歡根據滾動的內容的方向隱藏/顯示屏幕頂部的導航。如果我開始向下滾動頁面，則會通過向上移動來隱藏導航欄。然後是相反的。

下面是我一直在玩的東西，但沒有運氣到目前爲止。

scroll.on Events.Scroll， - > 如果scroll.scroll> scroll.scrollY然後psd.subHead.animate 屬性： Y：-50

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

我想我要動起來如果滾動位置小於當前位置，如果滾動位置更大，則向下滾動。

任何幫助非常感謝！

來源

2016-09-29 Luis Escobar

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

來源

2016-09-29 12:03:49 kazzyt

這太好了！非常感謝。出於好奇，什麼是「爲我在[0..10]」？你是否推薦任何網站，我可以找到教程。我幾乎看到了Framer上的少數幾個。大多數情況下，我發現人們展示他們的項目，但沒有解釋。再次感謝！ –

沒關係，我明白了。索引 - 你創建了10個面板。直到我打開你的榜樣纔開始意識到。謝謝！ –

樂意幫忙，歡迎來到Stack Overflow。如果此答案或任何其他人解決了您的問題，請將其標記爲已接受。 – kazzyt

基於在Framer.js中向上滾動或向下滾動的操作

回答

相關問題