0

高さの異なる要素で scrollView を作成したいと思います。

私は各ビューを翻訳し、それらのそれぞれにオフセットを適用することになっていると思いますが、高さが各ビューで動的である場合(その中にあるもの)、どのようにこれを行うべきですか?

私はチャットを構築しようとしています。

ありがとうございました

scrollView の有名な/Angular ドキュメントから取られたコード

<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 に答える