Angularjs Digest循环锁定滚动

时间:2016-12-06 13:44:22

标签: javascript angularjs ionic-framework

大家下午好,

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

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

enter image description here

1 个答案:

答案 0 :(得分: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