Question

大家下午好，

我有以下问题我在同一个屏幕上有一个导航选项卡，引用了html中的四个部分。这些部分根据活动选项卡获得显示块或显示无，并且每个选项卡具有已经通过ajax在后台加载的不同内容，直到ai一切正常，问题是当我在选项卡之间导航时具有不同大小的框高度，显然Angularjs的消化循环需要识别这个调整大小并且页面的滚动被锁定，直到它检测到新的高度，有人知道如何继续解决这个问题，我正在使用IONIC FRAMEWORK。

下面是一个显示内容框如何的图像，记住一次只能看到一个，当我看到页面时，我注意到锁定发生在style =" transform: translate3d (0px, 0px, 0px) Scale (1);

Answer 1

经过几次尝试后，我把这个bug放到一边去了其他功能，当在控制选项卡的指令中进行修正时，我注意到我可以在加载新选项卡时重新计算滚动大小，添加了以下行点击功能：

$ionicScrollDelegate.resize(); //Fix box resize bug when trasition between tabs

功能如此：

  $timeout(function () {
    childElem = angular.element(document.querySelector(".child")).prop('children');
    if(childElem.length){
      for (var i = 0; i < childElem.length; i++) {
        angular.element(childElem[i]).on('click', function (e) {
          var tab = angular.element(e.path ? e.path[0] : e.target).prop('id').replace(/tab/g, "");
          $rootScope.$emit('aba_ativa_feed', tab); // informa a view feed qual a aba ativa
          for (var i = 0; i < tabs.length; i++) {
            if(i == tab - 1) {
              ativos[i] = true;
            } else {
              ativos[i] = false;
              angular.element(document.querySelector("#tab-nav-block-id-".concat(i+1))).addClass('ng-hide');
            }
          }
          angular.element(document.querySelector("#tab-nav-block-id-".concat(tab))).removeClass('ng-hide');
          $ionicScrollDelegate.scrollTo(0, blocksScrollPosition[tab - 1], true);
          scope.active = ativos;
          scope.$apply();
          $ionicScrollDelegate.resize(); //Fix box resize bug when trasition between tabs
        })
      }
    }
  }, 200)

有关详细信息，请查看here

Angularjs Digest循环锁定滚动

1 个答案: