html5_ionic上拉刷新

最新推荐文章于 2024-08-18 18:26:16 发布

原创最新推荐文章于 2024-08-18 18:26:16 发布 · 429 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Ionic框架和AngularJS创建的应用案例，演示了如何实现下拉刷新功能并从服务器获取数据更新列表项。该应用通过$http服务发起GET请求获取JSON文件中的数据，并在成功后更新视图。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>菜鸟教程(runoob.com)</title>

    <!-- 导入依赖 -->
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">

	<!-- 作用域 -->
        angular.module("myapp", ["ionic"])
             .controller( "myctrl",function($scope,$timeout,$http){
                //赋初始值
                 $scope.items=[
                     {
                         "name":"HTML5"
                     },
                     {
                         "name":"JavaScript"
                     },
                     {
                         "name":"Css3"
                     }
                 ];
              //下拉刷新是执行
               $scope.doRefresh = function() {
              //访问数据
               $http.get("item.json")//注意改为自己本站的地址，不然会有跨域问题
                   .success(function(newItems) {
                  //重新赋值
                   $scope.items = newItems;
                })
                .finally(function() {
                //关闭下拉出来的东西
                 $scope.$broadcast("scroll.refreshComplete");
                });
              };
           })
    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl" >
<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>
</html>