您的位置：首页 > 其它

ionic中的实现下拉刷新

2015-05-01 21:26 69 查看
Ionic提供了非常简单的指令来实现下拉刷新。首先，我们需要在列表前加一个
标签
<body ng-app="ionicApp">
<ion-header-bar class="bar-energized">
<h1 class="title">Pull to Refresh!</h1>
</ion-header-bar>
<ion-content ng-controller="TodosCtrl">
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="todo in todos">{{todo.name}}</ion-item>
</ion-list>
</ion-content>

</body>

我们可以定义下拉刷新时显示的字体，以及对应的操作，这里是调用doRefresh();

下面我们看一下js里面怎么控制

app.controller('TodosCtrl', function($scope) {
$scope.todos =  [
{name: "Do the dishes"},
{name: "Take out the trash"}
]

$scope.doRefresh = function() {
$scope.todos.unshift({name: 'Incoming todo ' + Date.now()})
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply()
};

})
这里我们实现上面标签里的doRefresh来更新数据，注意，在数据更新完成后要$broadcast广播一个scroll.refreshComplete的事件，这个事件是让ion-refresher知道刷新已经完成，可以隐藏自己了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航