1

我想知道使用“famo.us”scrollSync 的车轮方向。

但我无法搜索确切的解决方案。

我的代码如下。请给我一个解决方案。

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var ScrollSync = require("famous/inputs/ScrollSync");
var mainContext = Engine.createContext();
var start = 0;
var update = 0;
var end = 0;
var scrollSync = new ScrollSync(function() {
    return [0,0];
});
Engine.pipe(scrollSync);
var contentTemplate = function() {
    return "<div>Start Count: " + start + "</div>" +
    "<div>End Count: " + end + "</div>" +
    "<div>Update Count: " + update + "</div>";
};
var surface = new Surface({
    size: [undefined, undefined],
    classes: ['grey-bg'],
    content: contentTemplate()
});
scrollSync.on("start", function() {
    surface.setContent(contentTemplate());
});
scrollSync.on("update", function(data) {
    surface.setContent(contentTemplate());
});
scrollSync.on("end", function() {
    surface.setContent(contentTemplate());
});
mainContext.add(surface);
4

1 回答 1

2

为了让您的代码正常工作，我做了几件事。首先只需使用surface.pipe(scrollSync) 来获取事件滚动同步，然后，实际更新start、update 和end 的变量。我还添加了一个方向变量，在其中检查事件的 delta 属性以确定您移动鼠标滚轮的方向。

这是示例..希望对您有所帮助！

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var ScrollSync = require("famous/inputs/ScrollSync");
var mainContext = Engine.createContext();

var start = 0;
var update = 0;
var end = 0;
var direction = undefined;

var scrollSync = new ScrollSync();

var contentTemplate = function() {
    return "<div>Start Count: " + start + "</div>" +
    "<div>End Count: " + end + "</div>" +
    "<div>Update Count: " + update + "</div>" + 
    "<div>Direction: " + direction + "</div>";
};
var surface = new Surface({
    size: [undefined, undefined],
    classes: ['grey-bg'],
    content: contentTemplate()
});

surface.pipe(scrollSync);

scrollSync.on("start", function() {
    start += 1;
    surface.setContent(contentTemplate());
});
scrollSync.on("update", function(data) {
    update += 1;
    delta = data['delta'];
    direction = delta[0] == 0 ? (delta[1] > 0 ? "down" : "up") : (delta[0] > 0 ? "right" : "left") ;
    surface.setContent(contentTemplate());
});
scrollSync.on("end", function() {
    end += 1;
    surface.setContent(contentTemplate());
});
mainContext.add(surface);
于 2014-05-27T15:49:32.943 回答