ionic 下拉刷新 — ion-refresher

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
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏