ionic 下拉刷新

来源：互联网发布：国研网数据子库编辑：程序博客网时间：2024/05/01 11:27

ionic 下拉刷新

<!DOCTYPE html ><html lang="en"  ><head>  <meta charset="UTF-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  <title>下拉刷新</title>  <style>    body{      cursor: pointer;    }  </style>  <link rel="stylesheet" href="ionic/css/ionic.min.css">  <script src="ionic/js/ionic.bundle.min.js "></script>   <script type="text/javascript">         var my = angular.module('starter', ['ionic'])         my.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();            }          });        })        my.controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){            $scope.items=[                {                    "name":"小胡子"                },                {                    "name":"小红子"                },                {                    "name":"小花花"                }            ];            $scope.doRefresh = function() {                $http.get('item.json')  //注意改为数据的地址，不然会有跨域问题                    .success(function(newItems) {                        $scope.items = newItems;                    })                    .finally(function() {                        $scope.$broadcast('scroll.refreshComplete');                    });            };        }])    </script></head><body ng-app="starter" ng-controller="actionsheetCtl" > <div class="bar bar-header">    <button class="button button-icon icon ion-navicon"></button>    <div class="h1 title">下拉刷新</div>    <button class="button button-clear button-positive">Edit</button>  </div> <br>   <ion-pane style="margin-top:40px;">        <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></html>

item.json

[    {        "name":"我是新数据"    },    {        "name":"看什么看,我是新的"    },    {        "name":"hello,我出来了"    },    {        "name":"hi,我是新的"    }]

1 0