Question

我正在开发离子应用程序并尝试实现pull to refresh功能。在这里，当我尝试拉动时，离子复习器没有显示图标/文本，而是页面变为空白，灰色背景变得可见。但是调用on-refresh函数。

<ion-nav-bar class="bar-positive">
    <ion-nav-buttons side="left">
        <button class="button button-icon icon  ion-chevron-left"></button>
    </ion-nav-buttons>
 </ion-nav-bar>
<ion-content id='yammer_message'>

    <ion-scroll direction="y" delegate-handle="mainScroll" ng-style="{'height': scroll.height}">
        <ion-refresher on-refresh="doRefresh()"
                       pulling-text="Pull to refresh..."
                       refreshing-text="Refreshing!"
                       refreshing-icon="ion-loading-c">

        </ion-refresher>

        <ion-list>
            <ion-item class="item-avatar item-borderless" type="item-text-wrap" ng-repeat="message in messages">
                <img ng-src="{{message.image_url}}" style='border-radius:0%'>
                <h2 style='color:red'>{{message.message_sender_name}}</h2>
                <p style='white-space:normal'>{{message.body.plain}}</p>
            </ion-item>
    </ion-list>

    </ion-scroll>
</ion-content>

<ion-footer-bar class="bar bar-footer" style='border-top:1px solid grey' >
    <form ng-submit="submit()">
        <input type='text' placeholder='Write a comment' ng-model='yammer.comment' style='color:black'>
    </form>
</ion-footer-bar>
</ion-view>

非常感谢帮助！

Answer 1

尝试将其放入控制器中。

                $scope.doRefresh = function() {
                if (something) {
                    $ionicLoading.show({
                        template: '<ion-spinner></ion-spinner>' + 'Refreshing!'
                    });
                    $timeout(function() {
                        //get some data
                        //Stop the ion-refresher from spinning
                        $scope.$broadcast('scroll.refreshComplete');
                        $ionicLoading.hide();
                    }, 1000);
                } else {
                    //
                     }
                }

有关$ionicLoading的更多信息。

Answer 2

老问题，但我仍然会回答。如果只是你的图标和文字没有出现，那么CSS可能是错误的。请使用此代码来设置微调器和文本的样式：

.spinner svg {
    stroke: #000;
    fill: #000;
}

.ionic-refresher-content {
    color: #000 !important;
}

这会使微调器和文本都变黑。

Answer 3

我的解决方案<ion-refresher>标记应位于<ion-content>标记旁边。像这样，

<ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> ... </ion-refresher>

刷新列表时如何渲染离子复活图标？

3 个答案: