如何将点击事件添加到具有特定效果的每个表面，无法添加修饰符

Question

如何为每个表面添加特定效果的点击事件，我无法添加修饰符。

我尝试下面的代码，但它不工作。我无法为每个表面添加StateModifier。请尽快帮我解决这个问题。

var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var context = Engine.createContext();
var myModifier = new StateModifier({
    Transform: Transform.translate(0, 100, 1)
});
var surfaces1 = [];
var scrollers = [];
var scroll_h1_cont = new ContainerSurface({
    size: [window.innerWidth, 100],
    properties: {
        overflow: 'hidden'
    }
});
var scroll_h1 = new Scrollview({
    direction: 0
});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
scrollers.push(scroll_h1_cont);
for (var i = 0; i < 9; i++) {
    var surface1 = new Surface({
        content: "Surface: " + (i + 1),
        size: [window.innerWidth / 3, 100],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
            lineHeight: "100px",
            textAlign: "center"
        }
    });
    surface1.pipe(scroll_h1);
    surfaces1.push(surface1);
    surface1.pipe(myModifier);
};
context.add(scroll_h1_cont);

有什么建议吗?

Answer 1

这至少可以让你的滚动视图工作。

/* globals define */
define(function(require, exports, module) {
    'use strict';
    var Engine     = require('famous/core/Engine');
    var Surface    = require('famous/core/Surface');
    var Scrollview = require('famous/views/Scrollview');
    var context = Engine.createContext();
    var surfaces = [];
    // create ScrollView
    var scrollview = new Scrollview({
        direction: 0
    });
    // create 100 surfaces and add them into array
    for (var i = 0; i < 9; i++) {
        var temp = new Surface({
            content: 'Surface: ' + (i + 1),
            size: [undefined, 100],
            properties: {
                backgroundColor: 'hsl(' + (i * 360 / 40) + ', 100%, 50%)',
                lineHeight: '100px',
                textAlign: 'center'
            }
        });
        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    // add array of surfaces into ScrollView
    scrollview.sequenceFrom(surfaces);
    // add ScrollView into context
    context.add(scrollview);
});