ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> ionic 下拉刷新 — ion-refresher

ionic 下拉刷新 — ion-refresher

来源:网络整理     时间:2016-05-16     关键词:refresher

本篇文章主要介绍了"ionic 下拉刷新 — ion-refresher",主要涉及到refresher方面的内容,对于web前端感兴趣的同学可以参考一下: 在做项目的时候一般会遇到下拉刷新的功能,我不知道大家平时是怎么实现的。因为我们现阶段使用的是 ionic,所以我就学习了一下利于框架去实现下拉刷新的功能。下面给...

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

ionic 下拉刷新 — ion-refresher

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

HTML 代码

  • ion-refresher : 即为下拉刷新的图标;

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

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

<body ng-app="starter" ng-c>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

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

以上就介绍了ionic 下拉刷新 — ion-refresher,包括了refresher方面的内容,希望对web前端有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_1109713.html

相关图片

相关文章