我想做一个带有一堆表面图像的滚动列表。然后,当我在表面上单击
或触摸
时,我希望获得受影响的surface
对象并对其执行某些操作(例如更改 >内容
)。
我下面的设置方式是使用scrollview ->container ->view ->modifier->surface
。我不知道它是否有效(也许是多余的)。但我无法在每个 sync
对象的 console.log(data)
中获取确切的对象触发事件。
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var View = require('famous/core/View');
var Scrollview = require('famous/views/Scrollview');
var Transform = require('famous/core/Transform');
var Modifier = require("famous/core/Modifier");
var GenericSync = require("famous/inputs/GenericSync");
var MouseSync = require("famous/inputs/MouseSync");
var TouchSync = require("famous/inputs/TouchSync");
var mainContext = Engine.createContext();
GenericSync.register({
"mouse" : MouseSync,
"touch" : TouchSync
});
var scrollview = new Scrollview({});
var listContainer = [];
var questionContainer = [];
var imgSurface = [];
var sync = [];
var imgModifier = new Modifier({origin: [0.5, 0.5]});
for (var i=0; i<10; i++) {
questionContainer[i] = new ContainerSurface({
size: [undefined, 300],
properties:{
overflow: 'hidden'
}
});
imgSurface[i] = new Surface({
content: '<img width="100%" src="http://placehold.it/400x300">'
});
sync[i] = new GenericSync(
["mouse", "touch"],
{direction : GenericSync.DIRECTION_X}
);
questionContainer[i].add(imgModifier).add(imgSurface[i]);
questionContainer[i].pipe(sync[i]);
questionContainer[i].pipe(scrollview);
sync[i].on("end", function(data) {
console.log(data);
});
listContainer.push(questionContainer[i]);
}
scrollview.sequenceFrom(listContainer);
mainContext.add(scrollview);
});
那么在这种情况下如何访问触发surface
或view
?我希望得到类似 data.triggerObject.setContent()
的东西,它引用数组中特定的 surface
。呃,这种事好像不存在……
更新 1:
答案不需要遵循我上面的代码。我的“高水平”目标是:
生成带有图像的表面列表。来自某个数组的数据。
检测每个表面的点击和触摸事件并对该表面执行某些操作
基本上,我尝试做这个例子的“高级”版本 https://github.com/Famous/examples/blob/master/src/examples/core/View/example.js
最佳答案
因此,GenericSync 充当 Sync 类的聚合器。 Sync 类为您提供基于简单事件(例如 mousedown 和 mousemove)的有用信息。这意味着如果您想要更多信息,您将不得不放弃 MouseSync。
如果您不想编写自己的 MouseSync 类,只需查看 MouseSync 发出其事件的位置即可。在事件处理函数中,您可以访问原始事件。您可以将任何您想要的内容附加到发出的有效负载中。以 MouseSync.js 中的 _handleEnd 为例
function _handleEnd(event) {
if (!this._prevCoord) return;
// I added this line..
this._payload.origin = event.origin;
this._eventOutput.emit('end', this._payload);
this._prevCoord = undefined;
this._prevTime = undefined;
}
如果直接编辑源代码并跟踪更改感觉太奇怪,您可能只想将 MouseSync 复制到不同的类名,例如。 MyMouseSync 并仅更改该文件。同样的逻辑也适用于 TouchSync。
希望这有帮助!
编辑您更新的问题:
您可以使用著名表面提供的默认事件。其中包括有效负载中的 origin 属性。
mousedown、mousemove、mouseup、touchstart、touchmove、touchend
surface.on('touchstart',function(e){
touchedSurface = e.origin;
});
在大多数情况下,我会检测与 Modernizr 等内容的接触,并仅应用必要的事件。祝你好运!
关于javascript - 获取每个表面或 View 的 GenericSync,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23944950/