离子卷轴上的角度变化样式

Angular changing style on scroll in ionic

本文关键字：变化 样式      更新时间：2023-09-26

我已经为页面上的后退箭头设置了背景更改。当我向下滚动然后它按应有的方式更改背景时，它工作正常，但是在我滚动回顶部后它不起作用，它不会变回透明背景。在模拟器和真实设备上进行测试后，我发现它只能在浏览器中工作，而在任何其他平台上都不起作用。

这是我的观点：

<div class="back-arrow" style="background-color: {{ background }};">
    <a class="button button-icon icon ion-chevron-left" ui-sref="main.front">
    </a>
</div>
<ion-content on-scroll="changeArrowBackground()">
    ...code...
</ion-content>

这是我的控制器：

$scope.changeArrowBackground = function(){
    console.log($ionicScrollDelegate.getScrollPosition().top == 0);
    if ($ionicScrollDelegate.getScrollPosition().top == 0) {
      console.log('transparent');
      $scope.background = "transparent";
    }
    else {
      console.log('not-transparent');
      $scope.background = "#353A41";
    }
}

每当我滚动它时，它都会根据位置正确记录。

它可能没有触发角度循环。尝试用$scope.$apply()强制它。

$scope.changeArrowBackground = function(){
    if ($ionicScrollDelegate.getScrollPosition().top == 0) {
      $scope.background = "transparent";
    } else {
      $scope.background = "#353A41";
    }
    $scope.$apply();
}
相关文章：