最新消息:欢迎大家来到小月博客

ionic 下拉刷新 — ion-refresher

web前端 小月 2465浏览 0评论

ionic 下拉刷新 — ion-refresher

 

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

ion

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

HTML 代码

  • ion-refresher : 即为下拉刷新的图标;
  • pulling-text=“下拉刷新” 这里的问题可以随意更换,喜欢就好;
  • on-refresh=”doRefresh()” 这个便是当下拉的时候我们要执行的方法,这里便是刷新页面的数据。
<body ng-app="starter" ng-controller="actionsheetCtl" >
    <ion-pane>
        <ion-content >
            <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
            <ion-list>
                <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
            </ion-list>
        </ion-content>
    </ion-pane>
</body>

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怎么实现上滑加载更多。祝大家学习愉快。 有什么疑问可以加群找我讨论。欢迎大家哦!

 

转载请注明:小月博客 » ionic 下拉刷新 — ion-refresher

一点心意×
 收藏 (2)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册