1

我有一个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/

我不知道为什么这不起作用..我是名人的新手，但我已经在互联网上搜索了这个问题的答案，但发现的很少。

提前感谢您的意见。

4

2 回答 2

1

我刚刚创建了一个服务，它将临时处理宽度和高度的真实值，但还在 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">

当 Surface 被部署时，一个 resize 事件会附加到它们上，这会强制 Surface 重新评估它的大小，因此服务将在 resize 时自动调用。

由于您不能只在模板中使用服务，因此我创建了一个辅助函数，该函数在我正在使用的当前控制器或指令范围内调用服务。

            //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 的所有子视图现在都有高度，它会在 Famo.us 0.3.0 中自动调整它的高度

于 2014-10-23T18:01:56.510 回答
0

所以，虽然我觉得设置fa-modifierto的大小[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()]

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

于 2014-10-19T16:36:17.057 回答