2016-07-07 80 views
0

我已經設置了頁面上後退箭頭的背景變化。當我向下滾動,然後它會改變背景時它工作正常,但它在我滾回到頂部後不起作用,它不會變回透明背景。在模擬器和真實設備上測試後,我發現它只能在瀏覽器中工作,而不能在任何其他平臺上工作。在離子上滾動的角度改變樣式

這是我的看法:

<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"; 
    } 
} 

每當我把它的滾動原木的基礎上正確的位置。

+0

你是怎麼調用'changeArrowBackground'? – adolfosrs

+0

我已編輯與該信息的問題。 – Marco

回答

1

它可能不會觸發角度週期。試着用$scope.$apply()來強制它。

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

是的,就是這樣,謝謝! – Marco