Question

我正试图在向上滚动时实现标题折叠的效果：http://youtu.be/QXeFl093_FI?t=50s

我对famo.us很新，但是到目前为止我已经尝试了一下jsfiddle：http://jsfiddle.net/jamalio/cy07xxs7/

var Engine = require('famous/core/Engine');
var Utility = require('famous/utilities/Utility');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var Scrollview = require('famous/views/Scrollview');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');

var mainContext = Engine.createContext();

var headerSize = 150;

var header = new Surface({
    content: "hello",
    properties: {
        backgroundColor: "#ccc",
        color: "#000",
        textAlign: "center",
        lineHeight: "9"
    }
})

var scrollView = new Scrollview();

var surfaces = [];

for (var i = 0, l = 30; i < l; i++) {
    var surface = new Surface({
        content: "test",
        size: [undefined, 60],
        classes: ["padding"],
        properties: {
            backgroundColor: "#fff",
            color: "#333"
        }
    })
    surface.pipe(scrollView)
    surfaces.push(surface);
}

scrollView.sequenceFrom(surfaces);

var scrollModifier = new StateModifier({ 
    size: [undefined,200],
    transform: Transform.translate(0,headerSize,0)
});

scrollView.justStarted = true;

var headerModifier = new StateModifier({ 
    size: [undefined,headerSize],
    transform: Transform.translate(0,0,1)
});

scrollView.sync.on('start', function(e) {
    console.log(e);
    scrollView.justStarted = true;
    scrollView.startingPoint = e.clientY;
});

scrollView.sync.on('update', function(e) {
    if(!scrollView.justStarted && 
       e.position < 0
      ) {
        console.log(e);
        var currentSize = headerModifier.getSize();
        console.log(currentSize);
        var changeAmount = headerSize + e.position;
        headerModifier.setSize([undefined,changeAmount]);
    }
    scrollView.justStarted = false;
});

mainContext.add(scrollModifier).add(scrollView);
mainContext.add(headerModifier).add(header);

这很棘手，因为scrollview.getPosition（）不返回整个scrollview的位置，而是返回现有节点。在后端，scrollview从视图中删除节点，因此它不会考虑它们。

为了解决这个问题，我在“更新”事件中得到了“位置”，并且在更新时我正在计算与标题原始大小的差异。问题是当你将scrollview拖过它的边界时，它会停止发送事件，它通常会跳过最后几个，所以不是回到0的位置，而是停在-4左右，这与整个逻辑混淆。 / p>

有没有人有更好的方法来解决这个问题？

Answer 1

我会做一个全长的滚动视图和一个拖动，当你滚动时从顶部拉下来。只需点击更新即可知道方向和移动距离，并使用scrollview._scroller.on（'edgeHit'）在您点击顶部时将拖拽降下来。这并没有真正缩小标题，就像将它移出屏幕一样，但无论如何。如果您希望标题实际缩小，可以使用修改器来缩放它或只更改它的大小。如果你想保留你拥有的逻辑，你可以使用edgeHit事件将数字重置为0或它的最大值，但通常使用scrollview上的get position是一种可怕的体验，甚至通常不会给你你想要的东西。

当滚动视图被推高时，如何顺利地使菜单栏缩小？

1 个答案: