Question

我对famo.us很新。我试图延长this previous question about swiping items in a scrollview。

我希望我的版本在draggable后面有背景表面，这些表面在用户滑动时显示。如果用户没有完成完全滑动，我还希望draggable能够快速恢复。

现在的两个问题是：

1）我想要在拖拽后面的表面不在拖曳后面。它们应该被它隐藏，直到用户滑动（我已经将它们透明，以便可以看到拖动）。

2）setPosition w / transition导致错误：Uncaught TypeError: Cannot read property 'SUPPORTS_MULTIPLE' of undefined。如果我没有提供过渡，那么过渡是首选。

我还应该注意，我不知道使用ContainerSurface是否是一种很好的方法，这可能是问题的一部分。

代码：

使用：http://code.famo.us/famous/0.2/famous.js

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 ContainerSurface = require("famous/surfaces/ContainerSurface");
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();

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

scrollview.sequenceFrom(surfaces);

var inFrontModifier = new StateModifier({
  transform: Transform.translate(0, 0, 1)
});

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

  var container = new ContainerSurface({
    size: [undefined, 50],
    properties: {
      overflow: 'hidden'
    }
  });
  var draggable = new Draggable( {
    xRange: [-160, 160],
    yRange: [0, 0]
  });

  draggable.dragId = i;

  draggable.on('end', function(e) {
    if (e.position[0] == 160) {
      console.log('yes surface', this.dragId);
    }
    else if (e.position[0] == -160) {
      console.log('no surface', this.dragId);
    }
    else {
      this.setPosition([0,0,0], {
        method: 'snap',
        period: 300
      });
    }
  });

  var item = new Surface({
    content: "Item: " + (i + 1),
    size: [undefined, 50],
    properties: {
      backgroundColor: "lightgrey",
      borderBottom: "1px solid grey",
      lineHeight: "50px",
      textAlign: "center"
    }
  });

  var backgroundYesModifier = new StateModifier({
    //on the left
    origin: [0,0]
  });
  var backgroundYes = new Surface({
    content: "Yes",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(0,255,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });
  var backgroundNoModifier = new StateModifier({
    //on the right
    origin: [1,0]
  });
  var backgroundNo = new Surface({
    content: "No",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(255,0,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });

  var node = new RenderNode(draggable);
  node.add(item);
  //try to put the draggable in front of the background

  container.add(inFrontModifier).add(node);
  //add the background
  container.add(backgroundNoModifier).add(backgroundNo);
  container.add(backgroundYesModifier).add(backgroundYes);

  item.pipe(draggable);
  item.pipe(scrollview);
  surfaces.push(container);
}

mainContext.add(scrollview);

Answer 1

“on top of”可以通过添加zIndex = 4来解决（4是任意选择高于其他zIndexes。）

我通过使用稍微不同的转换形式添加了转换。

虽然众所周知你不想在famo.us中创建很多ContainerSurfaces，但我不知道“太多”是什么，我不知道如何让“隐藏”工作除此以外。

这是我的版本，我认为你做了什么：

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 ContainerSurface = require("famous/surfaces/ContainerSurface");
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');

var mainContext = Engine.createContext();

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

scrollview.sequenceFrom(surfaces);

var inFrontModifier = new StateModifier({
  transform: Transform.translate(0, 0, 1)
});

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

  var container = new ContainerSurface({
    size: [undefined, 50],
    properties: {
      overflow: 'hidden'
    }
  });
  var draggable = new Draggable( {
    xRange: [-160, 160],
    yRange: [0, 0]
  });

  draggable.dragId = i;

  draggable.on('end', function(e) {
    if (e.position[0] == 160) {
      console.log('yes surface', this.dragId);
    }
    else if (e.position[0] == -160) {
      console.log('no surface', this.dragId);
    }
    else {
      this.setPosition([0,0,0], {
        curve: Easing.outBounce,
        duration: 300
      });
    }
  });

  var item = new Surface({
    content: "Item: " + (i + 1),
    size: [undefined, 50],
    properties: {
      backgroundColor: "lightgrey",
      borderBottom: "1px solid grey",
      lineHeight: "50px",
      textAlign: "center",
      zIndex:4
    }
  });

  var backgroundYesModifier = new StateModifier({
    //on the left
    origin: [0,0]
  });
  var backgroundYes = new Surface({
    content: "Yes",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(0,255,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });
  var backgroundNoModifier = new StateModifier({
    //on the right
    origin: [1,0]
  });
  var backgroundNo = new Surface({
    content: "No",
    size: [160, 50],
    properties: {
      backgroundColor: "rgba(255,0,0,0.2)",
      lineHeight: "50px",
      textAlign: "center"
    }
  });

  var node = new RenderNode(draggable);
  node.add(item);
  //try to put the draggable in front of the background

  container.add(inFrontModifier).add(node);
  //add the background
  container.add(backgroundNoModifier).add(backgroundNo);
  container.add(backgroundYesModifier).add(backgroundYes);

  item.pipe(draggable);
  item.pipe(scrollview);
  surfaces.push(container);
}

mainContext.add(scrollview);

Famo.us：带有可拖动项目的Scrollview：遇到背景曲面和setPosition转换问题

代码：

1 个答案: