Question

我想创建一个包含不同高度元素的scrollView。

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

我正在尝试建立聊天。

谢谢

代码取自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>

Answer 1

要根据内容调整视图的高度，您应该使用[undefined, true]，但它still has some issue，所以请务必检查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>

您的控制器：

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

    });


}]);

具有不同高度的动态元素的Scrollview

1 个答案: