<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. 不就是语法和长难句吗—笔记总结Day3

    ♦5♦状语从句——结果状语从句 · so(+adj / adv)...that · such(+ n)...that ♦6♦状语从句——让步状语从句 · although · though · eve ...

  2. NOIP 2016 D2T2 蚯蚓]（思维）

    NOIP 2016 D2T2 蚯蚓 题目大意 本题中,我们将用符号 \(\lfloor c \rfloor⌊c⌋\) 表示对 \(c\) 向下取整,例如:\(\lfloor 3.0 \rfloor = ...

  3. 不用破解版的 Navicat 了，几款免费且好用的 SQL 客户端送给你

    我是风筝,公众号「古时的风筝」. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 没别的意思,今天就是为了给你推荐几款 MySQL 客户端,这几款 ...

  4. Linux 进程必知必会

    上一篇文章只是简单的描述了一下 Linux 基本概念,通过几个例子来说明 Linux 基本应用程序,然后以 Linux 基本内核构造来结尾.那么本篇文章我们就深入理解一下 Linux 内核来理解 Li ...

  5. 介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

    1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...

  6. 使用Python进行XML解析

    XML 指可扩展标记语言(eXtensible Markup Language),常被设计用来传输和存储数据. 在进行医学图像标注时,我们常使用XML格式文件来存储标注,以下展示了使用Python来提 ...

  7. Python 列表生成式 生成器

    [x for x in os.listdir("F:\XXX")] 生成器(x * x for x in range(10)) 如果列表元素按照某种算法推算出来,那我们就可以在循环 ...

  8. python 装饰器（二）：装饰器基础（二）变量作用域规则，闭包，nonlocal声明

    变量作用域规则 在示例 7-4 中,我们定义并测试了一个函数,它读取两个变量的值:一个是局部变量 a,是函数的参数:另一个是变量 b,这个函数没有定义它. >>> def f1(a) ...

  9. 【Nginx】如何配置Nginx日志？这是最全面的一篇了！！

    写在前面 日志对于统计排错来说非常有利的.本文总结了 Nginx 日志相关的配置如 access_log. log_format.open_log_file_cache. log_not_found. ...

  10. [redis] -- 持久化机制篇

    快照(snapshotting)持久化(RDB) 该方式是redis默认 持久化方式 Redis可以通过创建快照来获得存储在内存里面的数据在某个时间点上的副本.Redis创建快照之后,可以对快照进行备 ...