javascript - 使用著名的 Angular 时可滚动的 View

Question

我是 famous 的新手，angular 的中级。

问题:因为 famous 中的所有内容都是固定定位的，我应该如何使用 famous angular 创建一个可滚动的部分？

HTML:这将创建一个正方形网格此代码取自 Famous/angular tut

<fa-app id="app">
  <fa-grid-layout fa-options="myGridLayoutOptions">
    <fa-modifier ng-repeat="item in list"
                 fa-size="[100, 100]"
                 fa-origin="[0.5, 0.5]"
                 fa-align="[0.5, 0.5]"
                 fa-rotate-z="item.rotate.get()">
      <fa-surface fa-background-color="item.bgColor">
        {{item.content}}
      </fa-surface>
    </fa-modifier>
  </fa-grid-layout>
</fa-app> 

CSS:定位应用窗口

#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

CTRL:制作一个 3x3 网格并遍历列表项

    var Engine = $famous[('famous/core/Engine')];
    var Surface = $famous[('famous/core/Surface')];
    var Transitionable = $famous['famous/transitions/Transitionable'];
    var Easing = $famous['famous/transitions/Easing'];
    $scope.myGridLayoutOptions = {
      dimensions: [3, 3]
    };

    $scope.list = [
      {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
      {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
      {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
      {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)},
      {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)},
      {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)},
      {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)},
      {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)},
      {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)},
      {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)}
    ];

    $scope.animate = function() {
      for (var i = 0; i < $scope.list.length; i++) {
        $scope.list[i].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 * i}) 
      };
    };

    $scope.animate();

Answer 1

好的，在查看了 famo.us Angular 的演示之后，我遇到了一个可以正确滚动的示例。 Documentation

在 famo.us 中如何考虑滚动与典型的 html 不同。我认为有几个原因 [内存管理、引擎循环等] 有一个名为 fa-scroll-view 的指令，它将创建一个滚动事件。任务并没有就此结束。必须使用管道将该事件附加到元素。

    <fa-app ng-controller="PipeCtrl">
  <!-- fa-scroll-view receives all events from $scope.myEventHandler, and decides how to handle them -->
  <fa-scroll-view fa-pipe-from="myEventHandler">
      <fa-view ng-repeat="view in views">
        <fa-modifier fa-size="[undefined, 160]">
        <!-- All events on fa-surfaces (click, mousewheel) are piped to $scope.myEventHandler -->
           <fa-surface fa-background-color="view.color"
                        fa-pipe-to="myEventHandler">
           </fa-surface>
          </fa-modifier>
      </fa-view>
  </fa-scroll-view>
</fa-app>

<script>
  angular.module('faPipeExampleApp', ['famous.angular'])
      .controller('PipeCtrl', ['$scope', '$famous', function($scope, $famous) {

        var EventHandler = $famous['famous/core/EventHandler'];

        $scope.views = [{color: 'red'}, {color: 'blue'}, {color: 'green'}, {color: 'yellow'}, {color: 'orange'}];

        $scope.myEventHandler = new EventHandler();

    }]);
</script>