<body ng-app="testApp">

<ion-header-bar align-title="left" class="bar-positive">

  <div class="buttons">

    <button class="button" ng-click="doSomething()">左侧按钮</button>

  </div>

  <h1 class="title">Title!</h1>

  <div class="buttons">

    <button class="button">右侧按钮</button>

  </div>

</ion-header-bar>

<ion-content ng-controller="MyController">

  <ion-refresher

          pulling-text="下拉刷新..."

          on-refresh="doRefresh()">

  </ion-refresher>

  <p> 一些内容! </p>

  <div>

    <button ng-click="scrollTop()">滚动到顶部!</button>

  </div>

  <ion-infinite-scroll

          on-infinite="loadMore()"

          distance="1%"

          ng-if="moreDataCanBeLoaded()"

          icon="ion-loading-c"

          on-infinite="loadMoreData()">

  >

  </ion-infinite-scroll>

</ion-content>

<ion-footer-bar align-title="left" class="bar-assertive">

  <div class="buttons">

    <button class="button">左侧按钮</button>

  </div>

  <h1 class="title">Title!</h1>

  <div class="buttons" ng-click="doSomething()">

    <button class="button">右侧按钮</button>

  </div>

</ion-footer-bar>

<script type="text/javascript">

   angular.module('testApp', ['ionic'])

            .controller('MyController', function($scope, $http, $ionicScrollDelegate) {

              $scope.items = [1,2,3];

              $scope.scrollTop = function() {

                $ionicScrollDelegate.scrollTop();

              };

              $scope.doRefresh = function() {

                $http.get('/new-items')

                        .success(function(newItems) {

                          $scope.items = newItems;

                        })

                        .finally(function() {

                          // 停止广播ion-refresher

                          $scope.$broadcast('scroll.refreshComplete');

                        });

              };

            });

    function MyController($scope, $http) {

      $scope.items = [];

      $scope.loadMore = function() {

        $http.get('/more-items').success(function(items) {

          useItems(items);

          $scope.$broadcast('scroll.infiniteScrollComplete');

        });

      };

      $scope.$on('stateChangeSuccess', function() {

        $scope.loadMore();

      });

    }

</script>

</body>

　　

　　

Ionic 移动端的更多相关文章

  1. angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...

  2. ionic更改端口号

    —— 重新指定端口号为8888 serve [options] ............................... 启动本地服务器进行开发测试 dev/testing [--console ...

  3. ionic使用方法

    windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...

  4. ionic 混合应用开发

    windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...

  5. Web前端开发——Ionic 3.0【爱创课堂专业前端培训】

    前端开发——Ionic 3.0 一.Ionic 移动端有三种开发方向 源生APP开发, 移动端web开发 混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发a ...

  6. 解决跨域问题之anywhere

    anywhere搭建服务,ionic PC端和手机端可以通过网址来查看网页效果.解决跨域问题 大家都知道编写完HTML代码后,可以直接在pc端的浏览器查看,但现在手机端越来越广泛了,想跟在pc端查看网 ...

  7. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  8. 微信端应用 ionic实现texarea 自适应高度

    最近公司项目,做微信端用到texarea 需要实现自适应高度的功能 当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式 ...

  9. Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率

    1. 问题 1.1. 问题上下文描述: 基于Ionic进行PC端的Web应用开发: 使用Tomcat作为最终服务发布容器. 1.2. 问题描述: 编译后main.js的大小为4-6MByte.(集成第 ...

随机推荐

  1. 一张PDF了解JDK9 GC调优秘籍-附PDF下载

    目录 简介 Oracle中的文档 JDK9中JVM参数的变化 废弃的JVM选项 不推荐(Deprecated)的JVM选项 被删除的JVM参数 JDK9的新特性Application Class Da ...

  2. JavaScript基础Curry化(021)

    时候我们希望函数可以分步接受参数,并在所有参数都到位后得到执行结果.为了实现这种机制,我们先了解函数在Javascript中的应用过程: 1. 函数的“应用”(Function Application ...

  3. IndentationError: unindent does not match any outer indentation level解决策略

    [亲测有效]Nodepad++/Sublime Text3中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer i ...

  4. java语言进阶（一）_Object类_常用API

    第一章 Object类 1.1 概述 java.lang.Object类是Java语言中的根类,即所有类的父类.它中描述的所有方法子类都可以使用.在对象实例化的时候,最终找的父类就是Object. 如 ...

  5. tbody滚动条占位导致与thead表头错位

    tbody出滚动条导致表头错位,上网上搜了一下,发现全是答非所问,能隐藏滚动条,还用问??我当前作出的效果是当tbody内容在正常情况下显示时,不显示滚动条,当内容区域高度超过外部容器时,滚动条自动显 ...

  6. JAVASE经典面试问题（必须熟背），你Get到了吗？

    JAVASE经典面试问题(必须熟背) 1. 编译java程序使用什么命令?运行java使用什么命令? javac *.java java 类名 2. 什么是JDK,什么是JRE,JDK与JRE有什么区 ...

  7. 赋值,逻辑,运算符, 控制流程之if 判断

    赋值运算 (1). 增量运算 age += 1 # age = age + 1 print(age) age -= 10 # age = age - 10 (2).交叉赋值 x = 111 y = 2 ...

  8. day21 模块与包+软件开发目录规范

    目录 一.导入模块的两种方式 二.模块搜索的路径的优先级 三.循环导入 四.区分py文件的两种用途 五.编写一个规范的模板 五.包 1 什么是包 2 为什么要有包 3 包的相关使用 3.1 在当前文件 ...

  9. for of

    1. 遍历范围 for...of 循环可以使用的范围包括: 数组 Set Map 类数组对象,如 arguments 对象.DOM NodeList 对象 Generator 对象 字符串 2. 优势 ...

  10. MYSQL 之 JDBC（七）：增删改查（五） DAO设计模式

    Data Access Object,数据访问对象 what:访问数据信息的类.包含了对数据的CRUD(create.read.update.delete,增删改查)操作,而不包含任何业务相关的信息. ...