Ionic V1中添加/移除div时如何设置ion-content高度？手风琴显隐后高度异常

我之前也碰到过Ionic V1里手风琴配合ng-if控制内容显隐，导致滚动到底部后ion-content高度显示异常的问题，结合你描述的场景（点击Accordion 2滚动到底部，再点击Accordion 3出现异常），本质原因是Ionic的ion-content滚动容器没有及时检测到ng-if带来的DOM内容变化，导致滚动区域高度计算错误。下面给你几个实用的解决办法：

1. 手动触发滚动容器的高度更新 #

Ionic提供了$ionicScrollDelegate服务，专门用来控制滚动组件。我们可以在切换手风琴内容的方法里，调用它的resize()方法，强制让ion-content重新计算滚动区域的高度。

具体实现： #

首先给你的ion-content添加一个delegate-handle属性，方便指定具体的滚动容器（如果页面只有一个ion-content也可以省略）：

<ion-content delegate-handle="mainAccordionScroll">
  <!-- 手风琴组件内容 -->
</ion-content>

然后在控制器的手风琴切换方法里，调用resize()：

.controller('YourController', function($scope, $ionicScrollDelegate, $timeout) {
  // 手风琴数据示例
  $scope.accordions = [
    { title: 'Accordion 1', isOpen: false, content: '内容1...' },
    { title: 'Accordion 2', isOpen: false, content: '很长的内容，滚动到底部用...' },
    { title: 'Accordion 3', isOpen: false, content: '内容3...' }
  ];

  $scope.toggleAccordion = function(item) {
    item.isOpen = !item.isOpen;
    // 延迟触发resize，确保ng-if的DOM操作已完成
    $timeout(function() {
      $ionicScrollDelegate.$getByHandle('mainAccordionScroll').resize();
    });
  };
});

这里用$timeout包裹resize()是因为ng-if的DOM添加/移除是异步的，直接调用可能还没完成DOM更新，延迟执行能保证滚动容器基于最新的DOM结构计算高度。

2. 考虑用ng-show替代ng-if（按需选择） #

如果你的手风琴内容不需要销毁作用域或者释放资源，可以把ng-if换成ng-show。ng-show只是通过CSS隐藏内容，不会移除DOM元素，这样ion-content的滚动容器能更稳定地检测内容高度变化，减少异常情况。

不过注意，ng-show会保留DOM元素，可能会稍微增加内存占用，适合内容不复杂的场景：

<div class="accordion-content" ng-show="item.isOpen">
  <!-- 手风琴内容 -->
</div>

3. 监听窗口大小变化（兜底方案） #

如果上面的方法还是偶尔出现异常，可以额外监听窗口的resize事件，在窗口变化时也触发滚动容器的高度更新：

angular.element(window).on('resize', function() {
  $ionicScrollDelegate.$getByHandle('mainAccordionScroll').resize();
});

不过这个是兜底方案，优先用第一种方法就足够解决大部分场景的问题。

内容的提问来源于stack exchange，提问作者diana