ion-refresher - 加载图标未显示

Question

我遇到了ion-spinner的问题。

下拉文本和图标显示出来了: 但是当我释放时，应该出现旋转动画的区域仍然是空白的。

我的ion-refresher像这样

<ion-refresher
        pulling-text="Pull to refresh..."
        on-refresh="doRefresh()"
        spinner="crescent">
</ion-refresher>

doRefresh()函数

$scope.doRefresh = function() {
    Entry.all().$promise.then(function(data) {
        $scope.logs = data;
        $scope.$broadcast('scroll.refreshComplete');
    });
}

发生了什么？

更新：

我测试过所有的旋转器，唯一有效的是spiral，但太大了。只有约一半的旋转器可见。

根据http://ionicframework.com/docs/api/directive/ionRefresher/文档，ionSpinner应该可以工作。

- Mazz

Answer 1

如果其他人遇到这个问题，对我来说，这个方法解决了它：

ion-refresher {
  z-index: 10;
}

- Ali Nasserzadeh

---

为什么只有10个？那些都是新手数字！你得把数字提高！;) - Paul Siersma

这会导致刷新器覆盖内容。最好的做法是：ion-content {background-color: transparent;} - Jörgen Lundgren

Answer 2

虽然这是一个老问题，但我也遇到了同样的问题，并找到了解决方案。旋转图标一直存在，但它是白色的，所以在白色背景下看不见。为了解决这个问题，请将以下代码添加到您的CSS文件中，将"skyblue"替换为您选择的颜色。

```css .spinner { border-top-color: skyblue !important; border-left-color: skyblue !important; } ```

.spinner svg {
  stroke: skyblue;
  fill: skyblue;
}

另外，这是我的ion-refresher。

<ion-refresher on-refresh="collectFeed()" pulling-text="Pull to refresh" spinner="ios-small"></ion-refresher>

- Ola Alsaker

Answer 3

您需要确保<ion-refresher>直接放置在<ion-content>下方。

- Marcin Rychter

Answer 4

这可能为时已晚，但我也遇到了这个问题。基本上是我在 CSS 文件中覆盖了 .spnner svg {}，然后忘记了。因此，所有后续加载的旋转器都保持了相同的高度和宽度。

- Shakib-Bin Hamid

Answer 5

在Ionic中，所有旋转器的行为都不是持久的。您可以尝试使用其他旋转器，例如android、spiral等，看看哪个适合您。

- Mudasser Ajaz

---

我测试了每个ionSpinner，但似乎只有螺旋形的有效。我将此添加到我的问题中。 - Mazz

Answer 6

<span>
<ion-refresher
        pulling-text="Pull to refresh..."
        on-refresh="doRefresh()"
        spinner="crescent">
</ion-refresher>
<span>

- syamkumar Syam