ionic下拉刷新—ion-refresher-创新互联

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

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

ionic 下拉刷新 — ion-refresher

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

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://scyanting.com/article/gcgce.html