ionic-下拉刷新载入数据

来源：互联网发布：三菱plcfx3u编程实例编辑：程序博客网时间：2024/05/22 06:33
<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css">    <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>    <title>Title</title>    <!--    由于移动端的特殊性        下拉刷新ion-refresher：移动端没有刷新的按钮~图标~可以操作的东西【浏览器的工具栏中有刷新的按钮】        下拉加载ion-infinite-scroll ：移动端页面，显示的内容有限，优先加载显示用户能看到的内容部分，在用户拖动网页的过程中，【动态加载下面的内容；模拟了PC端的延迟加载】--></head><body ng-controller="myCtrl"><!--页面头部--><ion-header-bar class="bar-royal">    <h1 class="title">我是标题</h1></ion-header-bar><!--内容--><ion-content>    <!-- 1.添加下拉刷新的组件 -->    <ion-refresher            pulling-text="正在刷新页面数据..."            on-refresh="doRefresh()">    </ion-refresher>    <!--ng-repent 渲染内容--><ul class="list">    <li ng-repeat="g in goodses">        <span ng-bind="g"></span>    </li></ul></ion-content><!--页面底部-->    <ion-footer-bar class="bar-royal">        <h1 class="title">我是底部</h1>    </ion-footer-bar><script>    var app=angular.module("myApp",["ionic"]);    app.controller("myCtrl",["$scope",function ($scope) {        $scope.goodses=[];        for(var i=0;i<50;i++){            $scope.goodses.push(i+"我是首页展示")        }        $scope.doRefresh=function () {            //下来载入数据            $scope.goodses=[];            for(var i=0;i<50;i++){                $scope.goodses.push(i+"我是下拉载入****")            }            /*             页面下拉刷新，其实就是延迟更改数据             数据一旦被延迟更新，在Angular中我们通过$scope.$apply()进行脏数据检查，             然后将数据同步 ionic中，要通过广播信号的方式，             使用$scope.$broadcase("scroll.refreshComplete")告诉页面中的所有组件，             数据已经刷新完成，可以重新加载数据             */            // 停止广播ion-refresher            $scope.$broadcast('scroll.refreshComplete');        }    }])</script></html>
0 0