如何在famo.us scrollview上添加滚动条？

Question

有关这个问题,关于滚动型我感兴趣的是相反的-如何控制从代码中滚动,并添加滚动条.只是想知道famo.us是否有任何预设方法来执行此操作,或者我们是否必须手动编码所有内容.

当前的滚动视图在移动设备上很棒,但对于PC用户来说,例如在没有鼠标滚轮的笔记本电脑上,它们是不可用的......

Answer 1

目前在Famo.us中没有自动添加滚动条的方法.就像在另一个问题中一样.您必须使用scrollview.sync的update事件自行更新滚动条.

scrollview.sync.on('update',function(e){ // Do Something });

如果您在构建的滚动条上使用可拖动修改器,则可以侦听可拖动事件更新,然后相应地设置滚动视图位置.

var scrollbar = new Surface();
scrollbar.draggable = new Draggable(..);

context.add(scrollbar.draggable).add(scrollbar);

scrollbar.draggable.on('update', function(e){ 
    posY = e.position[1];
    scrollview.setPosition(posY)
})

显然,您需要计算内容大小,以确定滚动条的大小,并使用该大小标量来确定每个像素在可拖动内移动的内容转换为内容.

祝好运!

编辑:我有时间为你建立一个有效的例子

http://higherorderhuman.com/examples/scrollbars.html

你将不得不自己处理调整大小..有一些古怪的scrollview行为,我用了几个解决方法来解决.例如,即使分页处于非活动状态,getPosition也会返回页面位置.所以我创建了一个视图并将所有内容放在视图中,并将单个视图添加到scrollview中.

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

var context = Engine.createContext();

// Set up content

var contentScrollview = new Scrollview();

var contentSurfaces = [];

contentScrollview.sequenceFrom(contentSurfaces);

var content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var contentView = new View({ size: [undefined,500*4] });

for (var i = 0; i < 4; i++) {
  contentSurface = new Surface({
    size: [undefined,500],
    content: content,
    properties: {
      backgroundColor: 'hsl('+ (i * 360 / 40) + ', 100%,50%)',
      color: 'white',
      fontSize: '24px',
      padding: '100px'
    }
  });

  contentSurface.pipe(contentScrollview);

  contentSurface.state = new StateModifier({
    transform: Transform.translate(0,i*500,0)
  })

  contentView.add(contentSurface.state).add(contentSurface);

}

contentSurfaces.push(contentView);

context.add(contentScrollview);

var contextSize = context.getSize();

var contentSize = 4 * 500 // Most Likely you keep track of this when creating 

var scrollbarSize = contextSize[1] * contextSize[1] / ( contentSize );

var scrollbar = new Surface({
  size: [20,scrollbarSize],
  properties: {
    backgroundColor: 'green'
  }
})

scrollbar.draggable = new Draggable({
  xRange: [0,0],
  yRange: [0,contextSize[1]-scrollbarSize]
})

scrollbar.pipe(scrollbar.draggable);

context.add(scrollbar.draggable).add(scrollbar);

var dragging = false;

scrollbar.draggable.on('start',function(e){
  dragging = true;
});

contentScrollview.sync.on('start',function(){
  dragging = false;
})

Engine.on('prerender',function(){

  if (dragging) {

    var maxBar    = contextSize[1] - scrollbarSize;
    var barPos    = scrollbar.draggable.getPosition()[1] * 1.0 / ( maxBar * 1.0);
    var maxScroll = contentSize - contextSize[1];
    var posY      = maxScroll * barPos;

    // This getPosition() is needed to prevent some quirkiness
    contentScrollview.getPosition();
    contentScrollview.setPosition(posY);
    contentScrollview.setVelocity(0);

  } else {

    var maxScroll   = contentSize - contextSize[1];
    var scrollPos   = contentScrollview.getPosition() / maxScroll;
    var barPosition = scrollPos * (contextSize[1]-scrollbarSize);

    scrollbar.draggable.setPosition([0,barPosition,0]) ;

  }

})