0

たくさんの表面画像でスクロールリストを作りたいです。次に、私がclick表面touch上にいるときsurface、影響を受けるオブジェクトを取得し、それを使って何かをしたい( change などcontent)。

以下に設定する方法は、scrollview -> container -> view -> modifier -> surface. 効率的かどうかはわかりません（おそらく冗長です）。console.log(data)しかし、各オブジェクトのイベントをトリガーする正確なオブジェクトを取得できませんsync。

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 :

答えは、上記の私のコードに従う必要はありません。私の「高レベル」の目標は次のとおりです。

  1. 画像を含む表面のリストを生成します。配列からのデータ。

  2. サーフェスごとにクリックとタッチのイベントを検出し、そのサーフェスで何かを行います

基本的に、この例の「高度な」バージョンを実行しようとしましたhttps://github.com/Famous/examples/blob/master/src/examples/core/View/example.js

4

1 に答える 1

1

そのため、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 プロパティが含まれます。

マウスダウン、マウスムーブ、マウスアップ、タッチスタート、タッチムーブ、タッチエンド

surface.on('touchstart',function(e){
    touchedSurface = e.origin;
});

ほとんどの場合、Modernizr などでタッチを検出し、必要なイベントのみを適用します。幸運を！

于 2014-05-30T00:31:03.873 に答える