在做项目的时候一般会遇到下拉刷新的功能，我不知道大家平时是怎么实现的。因为我们现阶段使用的是 ionic，所以我就学习了一下利于框架去实现下拉刷新的功能。下面给家说一下怎么用ionic实现页面的下拉刷新吧。

创新互联凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势，提供专业的网站策划、做网站、成都网站制作、网站优化、软件开发、网站改版等服务，在成都10余年的网站建设设计经验，为成都上千余家中小型企业策划设计了网站。

具体的实现请看下面的源码：

HTML 代码

• ion-refresher ： 即为下拉刷新的图标；

• pulling-text=“下拉刷新” 这里的问题可以随意更换，喜欢就好；

• on-refresh=”doRefresh()” 这个便是当下拉的时候我们要执行的方法，这里便是刷新页面的数据。

JavaScript 代码

• $scope.items[ ] 这个是页面刚进来的数据

• doRefresh () 显然这个是当你要刷新的时候所执行的方法

• item.json 这个就是当你点击刷新后我们就要从新获取数据 这个json就是最近的数据，项目中就是你要从新从服务器拿一次数据并且更新到客户端。

angular.module('starter', ['ionic']).run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });}).controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){

    $scope.items=[
        {
            "name":"HTML5"
        },
        {
            "name":"JavaScript"
        },
        {
            "name":"Css3"
        }
    ];

    $scope.doRefresh = function() {
        //注意改为自己本站的地址，不然会有跨域问题
        $http.get('http://www.aliyue.net/demo_source/item.json') 
            .success(function(newItems) {
                $scope.items = newItems;
            })
            .finally(function() {
                $scope.$broadcast('scroll.refreshComplete');
            });
    };}])

item.json 文件数据：

[
    {
        "name":"菜鸟教程"
    },
    {
        "name":"www.aliyue.net" } ]

今天就介绍到这里，小伙伴自己动手试试吧，改天给大家分享 ionic怎么实现上滑加载更多。祝大家学习愉快。 有什么疑问可以加群找我讨论。欢迎大家哦！

=============================

小月博客：http://www.aliyue.net

小月博客web技术交流 308649768

=============================

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

文章标题：ionic下拉刷新—ion-refresher-创新互联
转载注明：http://chengdu.cdxwcx.cn/article/gcgce.html