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问题跟踪器中，希望团队能够解决这个问题。

     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;
}

我不明白为什么之前的答案使用回调进行同步，这没有意义，特别是因为在调整Surfaces大小时重新评估大小，而不是在附加到scrollview的事件上。

由于Scrollview的所有孩子现在都有身高，所以在Famo.us 0.3.0中它也会自动调整它的高度

Answer 2

所以，虽然我觉得将fa-modifier的大小设置为[undefined,true]应该足以设置滚动内容的高度，但这还不够。

所以我添加了一个函数来检查滚动内容的高度并动态更新fa-size。这是我添加原始控制器的代码：

$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()]

很可能有更好的方法来做到这一点，最终我认为它应该由着名角度自动处理，但是现在这解决了它。

滚动视图不滚动表面大小[undefined，true]

2 个答案: