ionic下面三个标签,带侧拉Home.html子页面

最新推荐文章于 2023-04-11 18:02:52 发布

原创最新推荐文章于 2023-04-11 18:02:52 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Ionic框架中实现上拉刷新功能。通过AngularJS控制器与Ionic提供的Refresher组件结合，当用户下拉页面时，触发数据的重新加载。示例代码展示了如何配置Refresher组件，并定义刷新数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet"/><link>
    <script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
    <title>简单使用  上拉刷新</title>
    <script type="text/javascript">
        var app=angular.module("myApp",["ionic"]);
        app.controller("myCtrl",function($scope,$http){
            $scope.items=[
                {
                    name:"aaaaa"
                },
                {
                    name:"sdfs"
                },
                {
                    name:"sdfdsf"
                },
            ];
            $scope.doRefresh=function(){
                $http.get("http://localhost:63342/Htmlproject/ionic/item.json")
                        .success(function(data,status){
                            $scope.items=data;
                        }).error(function(data,status){

                        }).finally(function(){
                            //立即停止刷新
                            $scope.$broadcast('scroll.refreshComplete');
                        })
            }
        });
    </script>
</head>
<body ng-app="myApp">
    <ion-pane ng-controller="myCtrl">
        <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>