0

我想创建一个具有不同高度的元素的滚动视图。

我想我应该翻译每个视图并对每个视图应用一个偏移量，但是如果每个视图的高度都是动态的（里面有什么），我应该怎么做？

我正在尝试建立聊天。

谢谢

代码取自 scrollView 的著名/角度文档

<fa-app ng-controller="ScrollCtrl">

<fa-scroll-view fa-pipe-from="myEventHandler">
  <fa-view ng-repeat="view in views"> // views have different heights//
    <fa-modifier fa-size="[undefined, undefined]">

       <fa-surface fa-pipe-to="myEventHandler">
      My surface with things inside it. what if its big?
       </fa-surface>
      </fa-modifier>
  </fa-view>


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

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

    //$scope.views = some item with differents heights

    $scope.myEventHandler = new EventHandler();

}]);
 </script>
4

1 回答 1

0

要根据其内容调整视图的高度，您应该使用[undefined, true]，但它仍然存在一些问题，因此请务必检查 github 是否有任何修复。
在您的情况下，为了实现您的目标，我建议使用一个Transitionable值，当您知道正确的大小时，您可以使用该值从控制器动态更改视图的值。
像这样的东西：

您的看法：

<fa-scroll-view fa-pipe-from="myEventHandler">
    <fa-view ng-repeat="view in views"> // views have different heights//
        <fa-modifier fa-size="view.rowSize.get()">
            <fa-surface fa-pipe-to="myEventHandler" fa-size="view.rowSize.get()">
                My surface with things inside it. what if its big?
            </fa-surface>
        </fa-modifier>
    </fa-view>
</fa-scroll-view>

你的控制器：

angular.module('faScrollViewExampleApp', ['famous.angular'])
    .controller('ScrollCtrl', ['$scope', '$famous', '$http', function ($scope, $famous, $http) {

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

        $scope.myEventHandler = new EventHandler();

        // Initialize your transitionable with a default height of 100px
        var defaultRowSize = new Transitionable([undefined, 100]);

        // Loop through your views and set the default size for each of them

        angular.forEach($scope.views, function (view) {
            view.rowSize = defaultRowSize;
        })


        // I assume you are getting some data from a server, so you will have a $http request somewhere

        $http.get('yourserveraddress').success(function (data) {

            // Calculate the new height
            var newRowSize = aFunctionThatCalculateTheNewSize();

            // Get the view you want to update
            var viewToUpdate = $scope.views[theViewYouWantToChange];

            // Set the new height
            viewToUpdate.set([undefined, newRowSize]);

        });


    }]);
于 2014-12-04T18:09:14.820 回答