Famo.us ScrollView滚动像在聊天

Question

我有ScrollView和表面元素序列中。 我希望能够在数组出现后立即滚动到最新的元素。

这是一个演示，我希望它像任何聊天应用程序一样滚动......旧的表面超出了场景，新的将始终处于底部。现在的问题是一样的，如下：Famo.us how to make a scrollview be filled from bottom to top (or right to left)?

http://jsfiddle.net/LA49a/

Famous.loaded(function() { 
    var Engine = Famous.Core.Engine; 
    var Surface = Famous.Core.Surface; 
    var Scrollview = Famous.Views.Scrollview; 
    var Timer = Famous.Utilities.Timer; 

    var mainContext = Engine.createContext(); 

    var scrollview = new Scrollview(); 
    var surfaces = []; 
    var i = 0; 

    scrollview.sequenceFrom(surfaces); 

    Timer.setInterval(function() { 
     var temp = new Surface({ 
      content: "Surface: " + (i + 1), 
      size: [undefined, 50], 
      properties: { 
       backgroundColor: "hsl(" + (i * 360/40) + ", 100%, 50%)", 
       lineHeight: "50px", 
       textAlign: "center" 
      } 
     }); 

     temp.pipe(scrollview); 
     surfaces.push(temp); 
     i++; 
     // scrollview.goToNextPage(); 
    }, 400); 

    mainContext.add(scrollview); 
}); 

Answer 1

这在名为flex的ScrollView中通过将alignment属性设置为1来支持。

看到这个演示： https://github.com/IjzerenHein/famous-flex-chat

Answer 2

我假设你在一个非常大的，轮数将获得滚动型移动到终点，这说明你的“最新“元素。

如果您的表面具有相同的宽度（假设为scrollview的X方向），您可以通过检查实际像素数来获得更平滑的结果，您需要移动以将最后一项放置在右侧滚动视图的边缘。你有运行sequenceFrom（）的原始数组。乘以表面宽度中的项目数，然后减去scrollview宽度的像素（可以将其设置为'undefined'，在这种情况下，您需要查看窗口的宽度），以调整获取最新元素滚动视图的右侧而不是左侧。

如果您的曲面尺寸不相同，您可以通过将曲面添加到支持阵列中，将其更改为跟踪每个曲面的x偏移量。然后你可以问表面什么是偏移量，并减去滚动视图宽度的正确数量。

希望能帮助你更接近。

Answer 3

解决，通过180˚旋转滚动型和它里面的所有表面也通过180˚http://jsfiddle.net/tamtamchik/LA49a/3/

Famous.loaded(function() { 
    var Engine = Famous.Core.Engine; 
    var Surface = Famous.Core.Surface; 
    var Scrollview = Famous.Views.Scrollview; 
    var Timer = Famous.Utilities.Timer; 
    var Transform = Famous.Core.Transform; 
    var StateModifier = Famous.Modifiers.StateModifier; 
    var ContainerSurface = Famous.Surfaces.ContainerSurface; 

    var mainContext = Engine.createContext(); 

    var scrollview = new Scrollview(); 
    var surfaces = []; 
    var i = 0; 
    var surfaceHeight = 50; 

    scrollview.sequenceFrom(surfaces); 

    Timer.setInterval(function() { 
     var container = new ContainerSurface({ 
      size: [undefined, surfaceHeight] 
     }); 

     var temp = new Surface({ 
      content: "Surface: " + (i + 1), 
      size: [undefined, surfaceHeight], 
      properties: { 
       backgroundColor: "hsl(" + (i * 360/40) + ", 100%, 50%)", 
       lineHeight: "50px", 
       textAlign: "center" 
      } 
     }); 

     var surfaceRotate = new StateModifier({ 
      transform: Transform.rotateZ(Math.PI) 
     }); 

     var surfacePush = new StateModifier({ 
      transform: Transform.translate(window.innerWidth, surfaceHeight) 
     }); 

     container.add(surfacePush).add(surfaceRotate).add(temp); 
     container.pipe(scrollview); 
     temp.pipe(scrollview); 
     surfaces.unshift(container); 
     i++; 
    }, 400); 

    var rotate = new StateModifier({ 
     transform: Transform.rotateZ(Math.PI) 
    }); 

    var push = new StateModifier({ 
     transform: Transform.translate(window.innerWidth, window.innerHeight) 
    }); 

    mainContext.add(push).add(rotate).add(scrollview); 
}); 

Answer 4

嗯，这是相当狡猾！它的几个额外的矩阵，可能会变得非常缓慢，如果你有很多文本内容在这些节点...

通过使用一个巨大的数字，这只是强制famo.us滚动到结束我认为呢？

如果渲染发生了，你还可以：

pos = getPosition(nodeNum) // for last elements scrollposition 
setPosition(pos) 

但如果在插入相同的代码块当作你运动控制发生它尚未呈现。

有使用事件触发部署后的容量计算这里提供一个复杂的解决方法/渲染发生： how can we get the size of a surface within famo.us?

和这里的另一个伎俩，从独特的@johntraver使著名重新计算尺寸 how to make famo.us recalculate sizes?

你还看看Engine.nextTick（）或者JQuery.deferred吗？ 看来，插入内容后立即会出现“未呈现”的瞬间，但在更新后，您可以获取大小确定。