离子 ng-hide/ng-show 滚动问题答案

【问题标题】：Ionic ng-hide/ng-show scroll issue离子 ng-hide/ng-show 滚动问题
【发布时间】：2017-04-13 10:53:20
【问题描述】：

我目前正在为某人构建一个 Ionic 应用程序，但我在使用 ng-hide 和 ng-scroll 时遇到了一些问题。该页面显示产品，您可以在查看营养素或成分之间切换。我使用 ng-hide & ng-show 来实现这一点。但是，当我按下按钮切换数据时，滚动条会乱七八糟。我附上了一个简短的视频来演示这个问题： https://youtu.be/W9fFMdSLW8s

这里有一些代码 sn-ps，可能有助于深入了解。

代码笔

编辑：我制作了一个重现问题的代码笔：

http://codepen.io/JeremyKeusters/pen/qmBwzp

重现步骤：

请确保浏览器高度和预览窗口不要太大。
点击绿色的“显示营养素”按钮并尝试立即向下滚动。（像使用手机一样使用鼠标和拖动滚动）
您会注意到您被阻止并且无法向下滚动。解决方案是等待几秒钟，直到滚动“重置”。
尝试再次单击底部的绿色按钮。您会看到有很多空白区域可以滚动（滚动区域太大）。解决方案是再次等待几秒钟，直到它重置。

代码

模板页面：

  <table class="ingredients" ng-show="toggle">
    <tr>
      <th class="left">Ingredient</th>
      <th class="right">Amount per<br>100 ml</th>
    </tr>
    <tr ng-repeat="ingredient in JuiceIngredients">
      <td class="left">{{ingredient.Ingredient.Name}}</td>
      <td class="right">{{ingredient.Ingredient.Amount_g}} g</td>
    </tr>
  </table>
  <table class="nutrients" ng-hide="toggle">
    <tr>
      <th class="left">Nutrient</th>
      <th class="right">Amount per 100 ml</th>
      <th class="right">% of reference quantity</th>
    </tr>
    <tr ng-repeat="nutrient in JuiceNutrients">
      <td class="left">{{nutrient.Nutrient.Name}}</td>
      <td class="right" ng-bind-html="nutrient.Nutrient.Amount_html"></td>
      <td class="right">{{(nutrient.Nutrient.PartOfRI * 100 | number:0)}} %</td>
    </tr>
  </table>
  <br>
  <button ng-click="toggle=!toggle;" class="button button-block button-balanced default-button">
    <span ng-hide="toggle">Show ingredients</span>
    <span ng-show="toggle">Show nutrients</span>
  </button>

controller.js：

  bottleSrv.getBottleDetails($rootScope.scannedCode).then(function (data) {
    $scope.JuiceID = data.JuiceID;
    $scope.ExpirationDate = data.ExpirationDate;
    $scope.JuiceImg = "https://someurl.com/task.php?token=" + $rootScope.userToken + "&juice_id=" + data.JuiceID + "";

    juiceSrv.getJuiceDetails($scope.JuiceID).then(function (data) {
      $scope.JuiceName = data.Name;
      $scope.JuiceDescription = data.Description;
    })

    juiceSrv.getJuiceIngredients($scope.JuiceID).then(function (data) {
      $scope.JuiceIngredients = data;
    })

    juiceSrv.getJuiceNutrients($scope.JuiceID).then(function (data) {
      $scope.JuiceNutrients = data;
    })
  });

有人有解决这个问题的方法吗？提前感谢您的帮助！

-杰里米

【问题讨论】：

当您单击按钮时，它们会向右显示某些 x 项的其他页面，然后滚动出现底部问题？
不是真的.. 当我单击按钮时，它会通过 ng-hide 和 ng-show（以及通过“切换”变量）显示其他内容。当我单击并且新内容比旧内容短时，滚动不适应并且您可以向下滚动太远。此外，当新内容比旧内容长时，您无法看到整个新内容，因为“最大滚动”太短了..
你能把工作代码放到 plunkr 里吗？
只检查仅在 iOS 或 android 中发生？因为我签入了运行良好的 android。
@PareshGami 我会检查，但你可以看到在 CodePen 中它也不起作用，而且 CodePen 既不是 iOS 也不是 Android..

标签： javascript angularjs ionic-framework

【解决方案1】：

我们点击按钮调用控制器中的一个函数并使用$ionicScrollDelegate.resize();调整文档的高度

html

<button ng-hide="toggle" ng-click="toggleButton()" class="button button-block button-balanced default-button">
Show ingredients
</button>

<button ng-show="toggle" ng-click="toggleButton()" class="button button-block button-balanced default-button">
Show nutrients
</button>

js

$scope.toggle = false;
$scope.toggleButton = function() 
{
  $scope.toggle = !$scope.toggle;
  $ionicScrollDelegate.resize();
};

注意

在名为$ionicScrollDelegate的控制器中添加依赖项

【讨论】：

感谢@Paresh Gami 的回答，但让问题变得更糟！现在间距更大了..
@NickyTheWrench 很高兴

【解决方案2】：

我终于找到了这个问题的答案。我在 ion-content 元素中添加了溢出滚动元素。

<ion-content overflow-scroll="true">

这解决了问题。它确实与底部间距有点混乱，但你可以用一些 CSS 来解决这个问题。

【讨论】：