Question

我是着名的中级和角色的中间人。

问题：因为一切都是固定定位的，我应该如何使用着名的角度来创建可滚动的部分？

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();

enter image description here

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>

使用着名角度时可滚动视图

1 个答案: