Скролл-просмотр без прокрутки с размером поверхности fa [undefined,true]

Question

У меня есть scroll-view имеет один fa-surface который содержит HTML для моей страницы. Высота для этой 'fa-surface' является динамической, поскольку она может быть больше или меньше в зависимости от ширины страницы.

Я установил fa-modifier размер до fa-size=[undefined, true] (Прочтите, что true устанавливает высоту для высоты поверхности).

Это приводит к странице, которая не будет прокручиваться. Если я поставлю фиксированную высоту в fa-size это будет работать, но это не приносит пользы, поскольку страница отзывчива, а высота динамична.

Вот код для страницы:

<fa-app style="height:100%">
  <fa-scroll-view fa-pipe-from="eventHandler">
    <fa-view>
      <fa-modifier fa-size="[undefined, true]">
        <fa-surface fa-pipe-to="eventHandler">
          Misc HTML...
        </fa-surface>
      </fa-modifier>
    </fa-view>
  </fa-scroll-view>
</fa-app>

Вот простой контроллер для передачи событий.

angular.module('newvitalwallApp')
.controller('MainCtrl', function ($scope, $famous) {
  var EventHandler = $famous['famous/core/EventHandler'];
  $scope.eventHandler = new EventHandler();
});

Живая страница находится здесь на сервере разработчиков, если вам интересно, как она себя ведет:

http://staging-sqtmp3dxdz.elasticbeanstalk.com/

Я в недоумении относительно того, почему это не работает.. Я новичок в известности, но я искал в Интернете ответы на этот вопрос и нашел очень мало.

Спасибо заранее за ваш вклад.

Answer 1

Я только что создал сервис, который будет временно обрабатывать true для ширины и высоты, но также зарегистрировал проблему в f / a tracker, так что, надеюсь, команда исправит это.

     var faTrueService = function($famous){

         this.height = function(cl){
            if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){
                return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientHeight;
            }
         };

         this.width = function(cl){
           if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){
               return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientWidth;
           }
         };

       };

Теперь в шаблоне вы можете сделать следующее:

    <fa-modifier fa-size="[undefined, faTrue.height('.item-1')]">
    <fa-view fa-index="1">
        <fa-surface class="item-1" fa-pipe-to="pageScrollHandler">

Когда Surfaces развернуты, к ним присоединяется событие resize, которое вынуждает Surface переоценивать его размер, поэтому Служба будет вызываться при изменении размера автоматически.

Поскольку вы не можете просто использовать Службы в шаблоне, я создал вспомогательную функцию, которая вызывает Службу в текущей области Контроллера или Директивы, с которой я работаю.

            //temp fix for true
            $scope.faTrue = {
              height : function(cl){
                return faTrue.height(cl);
              },
              width : function(cl){
                return faTrue.width(cl);
              }
            };

Для целевого дочернего.fa-surface может потребоваться следующий стиль:

.fa-surface{
    overflow:hidden;
    height:auto;
    width:auto;
}

Я не понимаю, почему в предыдущем ответе используется обратный вызов для синхронизации, это не имеет смысла, тем более что размер переоценивается при изменении размера поверхностей, а не при событии, прикрепленном к просмотру прокрутки.

Поскольку все дочерние элементы Scrollview теперь имеют высоту, он также автоматически отрегулирует свою высоту в Famo.us 0.3.0

Answer 2

Так что, хотя я чувствую, установив размер fa-modifier в [undefined,true] должно быть достаточно, чтобы установить высоту прокручиваемого содержимого, этого недостаточно.

Поэтому я добавил функцию, которая проверяет высоту содержимого при прокрутке и динамически обновляет размер fa. Вот код, который я добавил оригинальный контроллер:

$scope.$on('$viewContentLoaded', function(){
  $famous.find('fa-scroll-view')[0].renderNode.sync.on('start', function(event) {
    var test = angular.element( document.querySelector( '#test' ) );
    $scope.testHeight = test[0].clientHeight;
  });
});

$scope.getTestHeight = function() {
  return $scope.testHeight;
}

Затем я изменил fa-size в целях [undefined, getTestHeight()]

Очень хорошо может быть лучший способ сделать это, и в конечном счете я думаю, что это должно быть обработано автоматически знаменитым пользователем, но сейчас это решает это.