famo.us - 著名：在滚动视图中滑动项目

Question

我希望实现与邮箱 ( http://www.mailboxapp.com/ ) 类似的功能，您可以使用 Famous ( http://famo.us )在列表中滑动单个项目以对其进行操作。

我尝试将“可拖动”修饰符添加到每个列表项，但是您似乎无法将修饰符添加到属于 Scrollview 的表面。

任何人（来自 Famous 或其他人）都知道我该怎么做吗？

Answer 1

弄清楚了。为了修饰滚动视图内的表面，需要将它们包装在 RenderNode 中。

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

var mainContext = Engine.createContext();

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

scrollview.sequenceFrom(surfaces);

for (var i = 0, temp; i < 40; i++) {

    draggable = new Draggable( {
        xRange: [-220, 220],
        yRange: [0, 0],
    });

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

    node = new RenderNode(draggable)
    node.add(item);

    item.pipe(draggable);
    item.pipe(scrollview);
    surfaces.push(node);

}

mainContext.add(scrollview);

通过@(markmarijnissen) Famo.us 滚动视图高度)

Answer 2

说明：在 aScrollview中，该方法从数组中sequenceFrom创建 a 。ViewSequence只要添加的项目可以返回 a getSize()，渲染就会正常工作。RenderNode符合这个标准。您还可以创建自定义View，因为它RenderNode也扩展。

下面是一个使用自定义 View 的代码片段，该 View 允许表面拖动并根据最终位置标准显示对拖动方向的响应。

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Scrollview = require("famous/views/Scrollview");
  var DragView = require('DragView');

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();
  var views = [];

  scrollview.sequenceFrom(views);

  for (var i = 0; i < 40; i++) {

    var view = new DragView({
      size: [undefined, 200],
      content: "Surface: " + (i + 1),
      backgroundColor: "hsl(" + (i * 360 / 20) + ", 100%, 70%)"
    });

    view._eventOutput.pipe(scrollview);
    views.push(view);

  }

  mainContext.add(scrollview);
});

// Custom Drag View Item
define('DragView', function(require, exports, module) {
  var Surface = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");
  var RenderNode = require('famous/core/RenderNode');
  var Modifier = require('famous/core/Modifier');
  var View = require('famous/core/View');
  var Transform = require('famous/core/Transform');
  var Draggable = require('famous/modifiers/Draggable');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');
  var RenderController = require('famous/views/RenderController');

  function _updatingDrag(e) {
    var pos = e.position;
    this.surface.setContent('Draggable Position is ' + pos);
  }

  function _endDrag(e) {
    var pos = e.position;
    this.surface.setContent('Draggable End Position is ' + pos);
    this.draggable.setPosition([0, 0], {
      duration: 300
    }, function() {
      this.renderer.hide();
    }.bind(this));

    if (pos[0] > 200) {
      console.log('showing OK');
      this.renderer.show(this.ok);
    }

    if (pos[0] < -200) {
      console.log('showing Not OK');
      this.renderer.show(this.not);
    }
  }

  function DragView() {
    View.apply(this, arguments);

    var draggable = new Draggable({
      xRange: [-220, 220],
      yRange: [0, 0],
    });

    var item = new Surface({
      content: this.options.content,
      size: [undefined, 200],
      properties: {
        backgroundColor: this.options.backgroundColor,
        lineHeight: "200px",
        textAlign: "center"
      }
    });

    var okItem = new Surface({
      content: String.fromCharCode(10004),
      size: [220, 200],
      properties: {
        color: "white",
        backgroundColor: "green",
        lineHeight: "200px",
        fontSize: "100px",
        textAlign: "center"
      }
    });
    var notOkItem = new Surface({
      content: String.fromCharCode(10006),
      size: [220, 200],
      properties: {
        color: "white",
        backgroundColor: "red",
        lineHeight: "200px",
        fontSize: "100px",
        textAlign: "center"
      }
    });

    var renderer = new RenderController();

    draggable.subscribe(item);

    draggable.on('update', _updatingDrag.bind({
      surface: item
    }));

    draggable.on('end', _endDrag.bind({
      surface: item,
      draggable: draggable,
      renderer: renderer,
      ok: okItem,
      not: notOkItem
    }));

    item.pipe(this._eventOutput);
    
    this.add(draggable).add(item)
    this.add(renderer);
  }

  DragView.prototype = Object.create(View.prototype);
  DragView.prototype.constructor = DragView;


  module.exports = DragView;
});

// Start Main App
require(['main']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>